（十）HTML5本地存储——SQLLite实现web留言本
生活随笔
收集整理的這篇文章主要介紹了
（十）HTML5本地存储——SQLLite实现web留言本
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現原理：
????? 界面中，存在一個輸入姓名的文本框，一個輸入留言的文本框，以及一個保存數據使用的按鈕，在按鈕下面放置一個表格，保存數據后從數據庫中重新拿去的所有數據，然后把數據顯示在這個表格中。再單擊按鈕時，調用saveData()函數，保存數據時的處理都被寫在了這個函數里；另外，打開頁面時將調用init()函數（<body οnlοad="init()></body>），將數據庫中全部已保存的留言信息顯示在表格中。
?
實現代碼：
?
SQLLite.html
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>使用SQLLite數據庫實現web留言本</title><script type="text/javascript" src="script4.js"></script> </head> <body οnlοad="init()"><h1>使用SQLLite數據庫實現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="保存" οnclick="saveData();"></td></tr></table><hr><table id="dataTable" border="1"></table><p id="msg"></p> </body> </html>
?
script4.js
?
//打開數據庫 var dataTable = null; //var db = openDatabase('MyData','','My Database',102400); var db = openDatabase("MsgData", "1.0", "留言表", 1024 * 1024, function () { }); //初始化 function init(){dataTable = document.getElementById("dataTable");showAllData(); } //擦除表格中當前顯示的數據 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');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){tx.executeSql('create table if not exists MsgData(name text,message text,time integer',[]);tx.executeSql('select * from MsgData',[],function(tx,rs){removeAllData();for(var i = 0;i < rs.rows.length;i++){showData(rs.rows.item[i]);}});}); } //追加數據 function addData(name,message,time){db.transaction(function(tx){tx.executeSql('insert into MsgData(name,message,time) 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(); // alert(name + memo + time);addData(name,memo,time);showAllData(); }
?
總結
以上是生活随笔為你收集整理的（十）HTML5本地存储——SQLLite实现web留言本的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （九）HTML5本地存储——本地数据库S
- 下一篇： js浏览器窗口大小改变时事件