HTML5 Web SQL Database深入解析

最新推荐文章于 2024-05-03 22:07:11 发布

前端独秀

最新推荐文章于 2024-05-03 22:07:11 发布

阅读量516

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=j021ji1aa&title=HTML5+Web+SQL+Database%E6%B7%B1%E5%85%A5%E8%A7%A3%E6%9E%90

版权

前端专栏收录该内容

493 篇文章

订阅专栏

本文探讨HTML5 WebSQLDatabase的用途与优势，包括减少服务器请求、提高前端操作效率，并提供详细API说明与综合案例，展示如何在前端模拟数据库操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【WEB SQL Database用途】

看到HTML5的这个用法之后，由于还是保守着原始的数据库的链接操作，所以比较迷惑的是在前端页面怎么去调用数据库呢，看了很多人写的此方面的东西，感觉这个东东似乎也是说的多用的少，大家都只是了解其用法而已，没有多少人在项目中真正实践过它的优劣。我也是因为好奇啦，所以想要知道这个东西究竟有什么用。

说到前端页面利用HTML5的Web SQL Database API来实现数据库操作，刚开始就比较费解，怎么能在前端去操作数据库呢，前端的代码都是可见的，如果真要去操作服务器上的数据库的话，恐怕安全性几乎就没有了，数据基本就泄漏了。不过后来认真的看了下W3C的文档，才发现其实这个数据库只是在前端页面利用HTML5 的 SQL Database来模拟数据库的操作，把一些现成的数据放入到这个模拟的数据库中，好处呢，当然是大大的有了。首先，这些现成的数据是大体安全的，因为最开始的时候肯定是从服务器传回来的，是可以随意在前端进行操作的。其次，就是这些现成的数据把他们集体放入到这个SQL Database模拟的数据库中后，就可以很方便的SQL的操作了，同时如果在同一个页面的多个地方对这些数据都要进行获取或者展现的时候，如果这些现成的数据可以满足需要的话，就可以直接获取这个database里的数据，而不用多次向服务器请求去取数据了，从而减少了请求的次数，极大了优化了前端操作的效率。因此在这个意义上HTML5的Web SQL Database这是有很大的用处！

【WEB SQL Database的支持情况】

浏览器细节

--------------------------------------------------------------------------------------------------

Chrome 3.0及以上版本均支持

FireFox 暂不支持

IE 暂不支持

Opera 10.5及以上版本均支持

Safari 3.2及以上版本均支持

------------------------------------------------------------------------------------------------------

【WEB SQL Database的方法】

说完了web sql database的用途之后，详细介绍一下它的用法，其实还算简单，只有基础的几个方法如下：

（1）openDatabase( dbName, dbVersion , dbDisplayName , dbEstimatedSize , callbackFun )

通过名字打开数据库

参数：

dbName 数据库实例名称，自定义

dbVersion 数据库版本，目前为1.0

dbDisplayName 数据库显示的名称

dbEstimatedSize 数据库预估的大小

callbackFun 回调函数

eg : var db=openDatabase( 'db', '1.0' , 'first database',2*1024*1024);

（2）db.transaction(callbackFun,errorCallbackFun,sucessCallbackFun)

打开数据库的事务

参数：

callbackFun 回调函数

errorCallbackFun 发生错误时的回调函数

successCallbackFun 成功执行时的回调函数

eg: db.transaction(function(tx){

//something

});

（3）executeSql( sqlString, arguments, callbackFun, errorCallbackFun)

执行sql语句，此方法为transaction的操作

参数：

sqlString sql语句

argument sql参数

callbackFun 回调函数

errorCallbackFun 产生错误时的回调函数

eg: db.transaction(function(tx){

tx.executeSql('CREATE TABLE IF NOT EXISTS ali (id integer primary key autoincrement, name)');

});

【注意】不同的是Web SQL Database里的sql语句没有数据库里的sql语句语法那么严格。

详细参考文档请见W3C Web SQL Database API

【综合案例】

XML/HTML
<!DOCTYPE html>
<html>
   <head>
     <title>测试 WebSQL Database</title>
     <meta charset="utf-8" />
   </head>
   <body>
      <h1>Web SQL Database</h1>
      <div id="info"> </div>
      <div id="result"></div>
   </body>
   <script>
      var db=openDatabase('db','1.0','my database',2*1024*1024);
      db.transaction(function(tx){
          tx.executeSql("create table ali (id ,name)");
          tx.executeSql("insert into ali values(1,'ali1')");
          tx.executeSql("insert into ali values(2,'ali2')");
          document.getElementById("info").innerHTML="<h2>建表成功，成功插入数据</h2>";
      });
      //查询数据
      db.transaction(function(tx){
        tx.executeSql("select * from ali",[],function(tx,result){
            var htm="<table border='1' cellspacing='1'><th>Id</th><th>Name</th>";
            for(var i=0;i<result.rows.length;i ){
                 var item=result.rows.item(i);
                 htm ="<tr><td width='100'>" item.id "</td><td width='100'>" item.name "</td></tr>"
            }
            htm ="</table>";
            document.getElementById("result").innerHTML=htm;
        });
      });
   </script>
</html>
结果如下图：