HTML5 — Wed SQL 本地数据库示例

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <script src="sql.js"></script>
7 </head>
8 <!--打开网页即调用init()函数，显示已存数据-->
9 <body onload="init()">
10    <table>
11        <tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
12        <tr><td>留言：</td><td><input type="text" id="memo"></td></tr>
13        <tr>
14            <td></td>
15            <!--事件触发-->
16            <td><input type="button" value="保存" onclick="saveData()"></td>
17        </tr>
18    </table>
19 <hr>
20 <table id="datatable" border="1">
21    <p id="msg"></p>
22 </table>
23 </body>
34 </html>

sql.js
 1 // 1、创建访问数据库的对象
 2 // 2、使用事务处理
 3 var datatbale = null;
 4 var db = openDatabase("Mydata","","My Database",1024*100);
 5 /*
 6     openDatabase(),作用打开数据，如果数据库不存在，则会创建一个新的数据库。
 7     五个参数说明：数据库名称、版本号、描述文本、数据库大小、创建回调
 8 */
 9 function init() {
10     datatbale = document.getElementById("datatable");
11     showAllData();
12 }
13 //清除数据，保留表头
14 function removeAllData() {
15     for(var i = datatbale.childNodes.length -1; i>=0;i--){
16         datatbale.removeChild(datatbale.childNodes[i]);
17     }
18     var tr = document.createElement("tr");
19     var th1 = document.createElement("th");
20     var th2 = document.createElement("th");
21     var th3 = document.createElement("th");
22     th1.innerHTML = "姓名";
23     th2.innerHTML = "留言";
24     th3.innerHTML = "时间";
25     tr.appendChild(th1);
26     tr.appendChild(th2);
27     tr.appendChild(th3);
28     datatbale.appendChild(tr);
29 }
30 //显示数据
31 function showData(row) {
32     var tr = document.createElement("tr");
33     var td1 = document.createElement("td");
34     td1.innerHTML = row.name;
35     var td2 = document.createElement("td");
36     td2.innerHTML = row.message;
37     var td3 = document.createElement("td");
38     var t = new Date();
39     t.setTime(row.time);
40     td3.innerHTML = t.toLocaleDateString()+" "+ t.toLocaleTimeString();
41     tr.appendChild(td1);
42     tr.appendChild(td2);
43     tr.appendChild(td3);
44     datatbale.appendChild(tr);
45 }
46 //事件处理，先清除数据再利用for循环调用showData()函数显示所有数据
47 function showAllData() {
48     db.transaction(function (tx) {
49         tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)",[]);
50         tx.executeSql("SELECT * FROM MsgData",[],function (tx,rs) {
51             removeAllData();
52             for(var i = 0;i<rs.rows.length;i++){
53                 showData(rs.rows.item(i));
54             }
55         })
56     })
57 }
58 //如何被调用？
59 function addData(name,message,time) {
60     /*
61     transaction()函数,用以处理事务：
62     包含事务内容的一个方法
63     执行成功回调函数（可选）
64     执行失败回调函数（可选）
65     */
66     db.transaction(function (tx) {
67         /*
68         executeSql()函数用以执行SQL语句，返回结果，方法有四个参数
69         1、查询字符串
70         2、用以替换查询字符串中问号的参数
71         3、执行成功回调函数（可选）
72         4、执行失败回调函数（可选）
73         */
74         tx.executeSql("INSERT INTO MsgData VALUES(?,?,?)",[name,message,time],function (tx,rs) {
75             alert("成功");
76         },
77             function (tx,erro) {
78                 alert(erro.source+"::"+erro.message);
79             }
80         )
81     })
82 }
83 //保存数据，并调用showAllData()函数显示所有数据
84 function saveData() {
85     var name = document.getElementById("name").value;
86     var memo = document.getElementById("memo").value;
87     var time = new Date().getTime();
88     addData(name,memo,time);
89     showAllData();
90 }

HTML5 — Wed SQL 本地数据库示例

推荐阅读