Web SQL Database实例
时间：2021-07-01 10:21:17
帮助过：2人阅读
<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body onload="init()">
8 <table>
9 <tr>
10 <td>姓名：
</td><td><input type="text" id="name"></td>
11 </tr>
12 <tr>
13 <td>留言：
</td><td><input type="text" id="memo"></td>
14 </tr>
15 <tr>
16 <td></td>
17 <td><input type="button" value="保存" onclick="saveInfo()"></td>
18 </tr>
19 </table>
20 <hr>
21 <table id="datatable" border="1">
22
23 </table>
24 <p id="msg"></p>
25 <script>
26 var datatable=null;
27
28 //创建数据库
29 var db=openDatabase("MyData","","My Batabase",1024*100);
30
31
32 //初始化数据
33 function init() {
34
35 datatable=document.getElementById("datatable");
36 showAllData();
37 }
38
39 //先移除所有数据并添加新的数据
40 function removeALLData() {
41
42 for(var i=datatable.childNodes.length-1;i>=0;i--){
43 datatable.removeChild(datatable.childNodes[i]);
44 }
45
46 var tr=document.createElement("tr");
47 var th1=document.createElement("th");
48 var th2=document.createElement("th");
49 var th3=document.createElement("th");
50 th1.innerHTML="姓名";
51 th2.innerHTML="留言";
52 th3.innerHTML="时间";
53 tr.appendChild(th1);
54 tr.appendChild(th2);
55 tr.appendChild(th3);
56 datatable.appendChild(tr);
57
58 }
59
60
61 //显示数据
62 function showData(row) {
63
64 var tr=document.createElement("tr");
65 var td1=document.createElement("td");
66 td1.innerHTML=row.name;
67 var td2=document.createElement("td");
68 td2.innerHTML=row.message;
69 var td3=document.createElement("td");
70 var t= new Date();
71 t.setTime(row.time);
72 td3.innerHTML=t.toLocaleDateString()+" "+t.toLocaleString();
73 tr.appendChild(td1);
74 tr.appendChild(td2);
75 tr.appendChild(td3);
76 datatable.appendChild(tr);
77
78
79
80 }
81
82 //从数据库查询并显示所有数据
83 function showAllData() {
84 db.transaction(function (tx) {
85 tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER )",[]);
86 tx.executeSql("SELECT * FROM MsgData",[],function (tx,rs) {
87 removeALLData();
88 for(var i=0;i<rs.rows.length;i++){
89 showData(rs.rows.item(i));
90 }
91 });
92 })
93 }
94
95 //向数据库添加数据
96 function addData(name,message,time) {
97 db.transaction(function (tx) {
98 tx.executeSql("INSERT INTO MsgData VALUES (?,?,?)",[name,message,time],function (tx) {
99 alert("成功");
100 },function (tx,error){
101 alert(error.source+":"+error.message);
102 });
103
104
105 })
106 }
107
108
109 //保存数据
110 function saveInfo() {
111
112 var name=document.getElementById("name").value;
113 var memo=document.getElementById("memo").value;
114 var time=new Date().getTime();
115 addData(name,memo,time);
116 showAllData();
117
118 }
119
120 </script>
121 </body>
122 </html>
为什么HTML5会放弃Web SQL Database?
Web SQL Database采用了sqlite做为后端，可以用js进等数据库操作，非常方便，可是刚刚发现，这个标准被放弃了：Web SQL Database
放弃的原因是：
This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思是：
该文件是W3C推荐标准，但规范的制定工作已经停止。该规范陷入僵局：所有感兴趣的实现者都使用了相同的SQL后端（SQLite的），但我们需要多个独立的实现沿着规范化的路径进行。
我非常不能理解，sqlite有什么不好的，大家都认同，不就可以了么？为什么为这个放弃呢？
各大浏览器还会继续支持这个标准么？如果我现在在新项目中继续采用这个功能，会不会不久之后就会因为浏览器停止支持而失效？
Web SQL Database实例
标签：
