Web SQL Database实例

2023-08-23 22:25:28

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body onload="init()">

 <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="保存" onclick="saveInfo()"></td>

     </tr>

 </table>

 <hr>

 <table id="datatable" border="1">

 </table>

 <p id="msg"></p>

 <script>

     var datatable=null;

     //创建数据库

     var db=openDatabase("MyData","","My Batabase",1024*100);

     //初始化数据

     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.toLocaleString();

         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 VALUES (?,?,?)",[name,message,time],function (tx) {

                  alert("成功");

              },function (tx,error){

                  alert(error.source+":"+error.message);

              });

          })

     }

     //保存数据

     function saveInfo() {

         var name=document.getElementById("name").value;

         var memo=document.getElementById("memo").value;

         var time=new Date().getTime();

         addData(name,memo,time);

         showAllData();

     }

 </script>

 </body>

 </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有什么不好的，大家都认同，不就可以了么？为什么为这个放弃呢？
各大浏览器还会继续支持这个标准么？如果我现在在新项目中继续采用这个功能，会不会不久之后就会因为浏览器停止支持而失效？

码农公寓

为什么HTML5会放弃Web SQL Database?

相关文章