html5使用本地文件数据库编写留言本-前端ABC

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
        <title>本地文件数据库实现web留言本</title>
</head>
<body onload="init();">
        <h1>使用数据库实现web留言本</h1>
        <table>
                <tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
                <tr><td>留言：</td><td><input type="text" id="memo"></td></tr>
                <tr><td></td>
                <td><input type="button" value="保存" onclick="saveData();"></td>
                </tr>
        </table>
        <hr>
        <table id="datatable" border="1"></table>
        <p id="msg"></p>

</body>
</html>
<script type="text/javascript">
        var datatable = null;
//创建访问数据库的对象
        var db = openDatabase("MyData",'','',102400);
//初始化界面
        function init(){
                datatable = document.getElementById("datatable");
//展示数据库中的所有数据
                showAllData();
        }

        function showAllData(){
//使用事务的方式处理
                db.transaction(function(tx){
//使用executeSql来执行sql语句
                        tx.executeSql('create table if not exists MsgData(name TEXT,message TEXT, time INTEGER)',[]);//创建数据库
                        tx.executeSql('select * from MsgData',[],function(tx,rs){//查找MsgData中的所有数据，并在回调函数中显示数据
                                removeAllData();//清除表数据
                                for(var i =0;i<rs.rows.length;i++){
                                        showData(rs.rows.item(i));
                                }
                        });
                });
        }

        function removeAllData(){
                for(var i=datatable.childNodes.length-1;i>=0;i--){
                        datatable.removeChild(datatable.childNodes[i]);
                }

                var tr = document.createElement('tr');
                var th1 = document.createElement('th');
                var th2 = document.createElement('th');
                var th3 = document.createElement('th');
                th1.innerHTML = '姓名';
                th2.innerHTML = '留言';
                th3.innerHTML = '时间';
                tr.appendChild(th1);
                tr.appendChild(th2);
                tr.appendChild(th3);
                datatable.appendChild(tr);
        }

        function showData(row){
                var tr = document.createElement('tr');
                var td1 = document.createElement('td');
                var td2 = document.createElement('td');
                var td3 = document.createElement('td');
                td1.innerHTML = row.name;
                td2.innerHTML = row.message;
                td3.innerHTML = new Date();
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                datatable.appendChild(tr);

        }

        function addData(name,message,time){
                db.transaction(function(tx){
                        tx.executeSql('insert into MsgData values(?,?,?)',[name,message,time],function(tx,rs){
                                alert("保存成功");
                        },function(tx,error){
                                alert(error.source+"::"+error.message);
                        });
                });
        }

        function saveData(){
                var name =document.getElementById('name').value;
                var memo =document.getElementById("memo").value;
                var time = new Date().getTime();
                addData(name,memo,time);
                showAllData();
        }

</script>
欢迎分享本文，转载请保留出处：前端ABC » html5使用本地文件数据库编写留言本
html5使用本地文件数据库编写留言本

相关推荐

发表评论 0
