hywel
0%

HTML5本地存储——Web SQL Database

Posted on In

之前给大家介绍过h5的本地存储Local Storage和Session Storage，这两个是以一个键值来进行存储。存储少量而不复杂的数据是非常有用的，但是对应结构比较复杂的数据，就有点困难了。所以今天就给大家介绍一下为了解决这个问题出现的Web SQL Database.

Web SQL Database

中文翻译作“本地数据库”，是随着HTML5规范加入的在浏览器端运行的轻量级数据库。

三个核心方法

Web SQL Database 规范中定义的三个核心方法： openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象 transaction：这个方法允许我们根据情况控制事务提交或回滚 executeSql：这个方法用于执行SQL 查询 创建数据库：

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);

以上对应参数为：

  1. mydb：数据库
  2. 1.0：数据库版本号
  3. Test DB：文字说明
  4. 2*1024*1024：数据库大小
  5. 回调（非必须参数）

使用executeSql查询创建数据表：

db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
});

上述查询将在’mydb’数据库中创建一个名为LOGS的表。 要在表中创建内容，我们在上面的例子中添加简单的SQL查询，如下所示：

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “foobar”)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, “logmsg”)’);
});

我们还可以在创建时传递动态值，如下所示：

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);

db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id,log) VALUES (?, ?’), [d_id, d_log];
});

这里d_id和d_log是外部变量，executeSql将数组参数中的每个项映射到”?”,如d_id=1，d_log=2那么最终的查询如下：

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);

db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id,log) VALUES (1, 2’);
});

查询操作： 要读取现有的记录，我们使用回调来捕获结果如下：

var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);

db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “foobar”)’);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, “logmsg”)’);
});

db.transaction(function (tx) {
tx.executeSql(‘SELECT * FROM LOGS’, [], function (tx, results) {
var len = results.rows.length, i;
msg = “

Found rows: “ + len + “

“;
document.querySelector(‘#status’).innerHTML += msg;

  for (i = 0; i < len; i++){
     alert(results.rows.item(i).log );
  }

}, null);
});

最终的demo： 所以最后，让我们将这个例子保持在完整的HTML5文档中，如下所示：

  <script type="text/javascript">

     var db = openDatabase('mydb', '1.0', 'Test DB', 2 \* 1024 \* 1024);
     var msg;
     db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
        tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
        tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
        msg = '<p>创建并插入行日志消息。</p>';
        document.querySelector('#status').innerHTML =  msg;
     });
     db.transaction(function (tx) {
        tx.executeSql('SELECT \* FROM LOGS', \[\], function (tx, results) {
           var len = results.rows.length, i;
           msg = "<p>找到" + len + "行</p>";
           document.querySelector('#status').innerHTML +=  msg;
           for (i = 0; i < len; i++){
              msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
              document.querySelector('#status').innerHTML +=  msg;
           }
        }, null);
     });

  </script>
Status Message

结果如下：

创建并插入行日志消息。

找到2行

foobar

logmsg

兼容性如下： QQ图片20171016095841