0%

HTML5本地存储——Web SQL Database

之前给大家介绍过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