使用數據庫實現web留言板

時間 2019-12-18

原文原文鏈接

火狐和ie是不支持的html

html5本地數據庫（web sql Darabase）核心方法 openDatabase transaction executeSql小解：html5

1 openDatabase 能使用現有數據庫或建立新數據庫建立數據庫對象。web

2 transaction 能訪問數據庫sql

3 executeSql 執行SQl查詢（例如獲取數據，將傳進來的數據保存在數據庫中）數據庫

<body onload="init();">
<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> <input type="button" value="保存" onclick="saveData();"/></td>
    </tr>
</table>
<hr/>
<table id="datatable" border="1">

</table>
<p id="msg">

</p>

<script>
    var datatable =null;
    var db=openDatabase('MyData' , '','My Database',102400); 
    if (!db) {
        console.log("數據庫建立失敗！");
    } else {
        console.log("數據庫建立成功！");
    }
    function init(){

        datatable = document.getElementById("datatable");
        showAllData();
    }
    /*
     //removeChild() 方法指定元素的某個指定的子節點。
     // 以 Node 對象返回被刪除的節點，若是節點不存在則返回 null。
    <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
     <button onclick="myFunction()">刪除</button>
     function myFunction()
     {
     var list=document.getElementById("myList");
     for(var i=list.childNodes.length-1;i>=0;i--){
     list.removeChild(list.childNodes[i]);
     }

    }*/
    function removeAllData(){
        //這就是用來刪除項目用的
        for(var i= datatable.childNodes.length-1;i>=0;i--){
            datatable.removeChild(datatable.childNodes[i]);//i是從0開始
        }

        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');
        td1.innerHTML = row.name;
        var td2 = document.createElement('td');
        td2.innerHTML = row.message;
        var td3 = document.createElement('td');
        var t = new Date();
        t.setTime(row.time);
        td3.innerHTML= t.toLocaleDateString() +"" + t.toLocaleTimeString();
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        datatable.appendChild(tr);
    }
    function showAllData(){
        db.transaction(function(tx){
            //debugger;
            tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT, time INTEGER)',[],
                    function(tx,rs){ console.log('建立MsgData表成功'); },
                    function(tx, error){ console.log('建立MsgData表失敗:' + error.message);
                    }
            );//在數據庫中建立一個數據表
            tx.executeSql("SELECT * from MsgData",[],function(tx,rs){
                //debugger;//從MagData數據表中獲取所有數據,成功以後獲取回調函數
                //console.log(rs.rows.length);
                removeAllData();
                for(var i =0;i<rs.rows.length;i++){//rs.rows是獲取的全部行
                    showData(rs.rows.item(i));
                }
            })
        })
    }
    function addData(name,message,time){
        db.transaction(function(tx){//這是訪問數據庫的transaction方法
            tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)',[name,message,time],function(tx,rs){//成功時執行的回調函數。返回兩個參數：tx和執行的結果。
                console.log("ok");
            },function(tx,error){
                console.log("查詢失敗"+"::"+error.message+"2")

            })
        })
    }
    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>