标签：
今天看了看HTML5 里面有一个本地的数据库，感觉挺有意思的，简单了解了一下，代码如下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>本地数据库</title> </head> <body> <h1>使用数据库实现Web留言本</h1> <table border="0" cellspacing="1" cellpadding="1"> <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" id="save" value="保存"/></td> </tr> </table> <hr /> <table border="1" id="datatable" cellspacing="0" cellpadding="0"></table> <p id="msg"></p> <script src="js/database.js" type="text/javascript" charset="utf-8"></script> </body> </html>
//文档加载完成执行init方法; window.onload = init; var datatable = null; //创建本地数据库,获取数据库访问对象。 var db = openDatabase(‘MyData‘, ‘‘, ‘My DataBase‘, 102400); //初始化 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){ /** * 执行sql语句, 创建表 * executeSq()函数 参数如下 * sqlQuery 数据库查询语句 * [] 参数数组，替换SQL语句中的?占位符。 * dataHandler 成功后执行的回调函数(可选) * errorHandler 失败后执行的回调函数(可选) */ tx.executeSql(‘CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)‘, [], function(tx, rs){ }, function(tx, error){ alert(‘错误‘) }); //执行SQL语句，查询MsgData 表中的所有数据。 tx.executeSql(‘SELECT * FROM MsgData‘, [], function(tx, rs){ //这里是SQL执行成功后调用的回调函数。 removeAllData(); for(var i = 0; i < rs.rows.length; i++){ showData(rs.rows.item(i)); } }, function(tx, error){ alert(error.source + " :: " + error.message); console.log(error.source + " :: " + error.message); }); }); } //添加数据 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); console.log(error.source + " :: " + error.message); }); }) } document.getElementById(‘save‘).addEventListener(‘click‘, function(){ var name = document.getElementById(‘name‘).value; var memo = document.getElementById(‘memo‘).value; var time = new Date().getTime(); addData(name, memo, time); showAllData(); }, false);
标签：
原文地址：http://www.cnblogs.com/miracle-t/p/5485849.html
