Web SQL Database实例

Posted 2020-07-12 平凡的世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web SQL Database实例相关的知识，希望对你有一定的参考价值。

  1 <!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实例的主要内容，如果未能解决你的问题，请参考以下文章

web前端开发JQuery常用实例代码片段(50个)

使用实体框架迁移时 SQL Server 连接抛出异常 - 添加代码片段

java.lang.NullPointerException: Attempt to invoke virtual method ‘int android.database.sqlite异常(代码片段

安全测试 web安全测试常规安全漏洞可能存在SQL和JS注入漏洞场景分析。为什么自己没有找到漏洞，哪么可能存在漏洞场景是？SQL注入漏洞修复 JS注入漏洞修复漏洞存在场景分析和修复示例(代码片段

django中使用原生的sql查询实例

spark关于join后有重复列的问题（org.apache.spark.sql.AnalysisException: Reference '*' is ambiguous）(代码片段