HTML5-Web SQL数据库

简介

Web SQL数据库是HTML5规范中所引入的一种本地数据库，提供了一个轻量级的完整的关系型数据库解决方案。Web SQL数据库可以让开发者使用标准的SQL查询语言对本地数据进行操作，具有易使用、数据存储量大、高效等特点。

安装

Web SQL数据库是HTML5规范，无需安装，只需浏览器支持即可使用。

使用

打开或创建数据库

var db = openDatabase('mydb', '1.0', 'My database', 2 * 1024 * 1024);

打开或创建名称为'mydb'、版本为'1.0'、描述为'My database'、大小为2MB的数据库。

执行SQL查询

db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS user (id unique, name, age)');
});

创建一个名为'user'的表，包含'id'、'name'、'age'三个字段。

db.transaction(function (tx) {
  tx.executeSql('INSERT INTO user (id, name, age) VALUES (1, "Tom", 25)');
  tx.executeSql('INSERT INTO user (id, name, age) VALUES (2, "Jerry", 28)');
});

插入两条数据到'user'表中。

db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM user', [], function(tx, results) {
      for (var i=0; i<results.rows.length; i++) {
          console.log('id: ' + results.rows.item(i).id + ', name:' + results.rows.item(i).name + ', age:' + results.rows.item(i).age);
      }
  }, null);
});

查询'user'表中的所有数据，并输出到控制台。

事务

Web SQL数据库支持事务操作，保证多个操作在一次事务中执行，避免了数据中途出错的情况。

db.transaction(function (tx) {
  tx.executeSql('DELETE FROM user WHERE id = ?', [1], function(tx, results) {
      console.log(results.rowsAffected);
  });
  tx.executeSql('UPDATE user SET age = ? WHERE id = ?', [30, 2], function(tx, results) {
      console.log(results.rowsAffected);
  });
});

以上代码会删除编号为1的数据，并将编号为2的数据的年龄修改为30，保证两个操作为同一事务。

错误处理

Web SQL数据库的操作都可能出现错误，需要对其进行处理。

db.transaction(function (tx) {
  tx.executeSql('INSERT INTO user (id, name, age) VALUES (?, ?, ?)', [1, 'Tom', 25], function(tx, results) {
      console.log('Insert successfully');
  }, function(tx, error) {
      console.log('Insert error: ' + error.message);
  });
});

当插入操作出错时，可以通过第三个参数执行错误处理代码块。

兼容性

Web SQL数据库在iOS和Android的webkit内核浏览器中较好支持，但在其他浏览器和移动设备中兼容性不佳，经过W3C确认已不再被维护。

总结

Web SQL数据库为Web应用提供了本地数据存储的解决方案，但由于兼容性问题已逐渐被IndexedDB所替代，开发者在实际应用中可以根据环境选择合适的技术解决方案。