HTML5 Web SQL 学习笔记

概述

Web SQL 是一种用于在 Web 浏览器中存储和检索数据的 API。它允许我们在客户端使用 SQL（结构化查询语言）查询和操作数据，为开发 Web 应用程序提供了更好的灵活性和性能。

Web SQL 并非标准规范，而是由 W3C 放弃，目前主要得到浏览器厂商的支持，如 Google Chrome 和 Safari。

创建数据库

使用 Web SQL 需要先创建一个数据库。可以使用以下代码创建：

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

其中，openDatabase 方法接受三个参数：

1. 数据库名称
2. 数据库版本号
3. 数据库描述
4. 数据库大小（可选）

以上代码创建了一个名为 mydb 版本号为 1.0 的数据库，并使用了 2MB 大小限制。

执行 SQL 命令

Web SQL 允许我们执行 SQL 命令来对数据库进行增删改查操作。例如，可以使用以下代码创建一个名为 users 的表：

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

以上代码在事务内执行了创建表的命令。executeSql 方法接受两个参数：

1. SQL 命令
2. 参数（可选）

在上面的例子中，我们没有传递任何参数，因此 SQL 命令中的 unique、name 和 age 属性被视为列名。如果我们想要添加数据到这个表中，可以使用以下代码：

javascriptCopy Code
db.transaction(function (tx) {
  tx.executeSql('INSERT INTO users (id, name, age) VALUES (1, "Alice", 21)');
  tx.executeSql('INSERT INTO users (id, name, age) VALUES (2, "Bob", 22)');
});

以上代码在事务内执行了两条插入数据的命令。

查询数据

Web SQL 允许我们使用 SQL 查询语句来检索数据。例如，如果我们想要查询所有年龄大于 20 的用户，可以使用以下代码：

javascriptCopy Code
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM users WHERE age > 20', [], function (tx, results) {
    var len = results.rows.length, i;
    for (i = 0; i < len; i++) {
      console.log(results.rows.item(i));
    }
  }, null);
});

以上代码在事务内执行了查询命令，并在查询完成后打印结果集中的每一行记录。

示例

下面是一个完整的 Web SQL 示例，展示了如何创建表、插入数据和查询数据：

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

db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name, age)');
  tx.executeSql('INSERT INTO users (id, name, age) VALUES (1, "Alice", 21)');
  tx.executeSql('INSERT INTO users (id, name, age) VALUES (2, "Bob", 22)');
});

db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM users WHERE age > 20', [], function (tx, results) {
    var len = results.rows.length, i;
    for (i = 0; i < len; i++) {
      console.log(results.rows.item(i));
    }
  }, null);
});

以上代码创建了一个名为 mydb 的数据库，创建了一个名为 users 的表，并向表中插入了两条记录。随后它查询了所有年龄大于 20 的用户，并将结果打印到控制台中。

结论

Web SQL API 提供了一种灵活和高效的方式来在浏览器中存储和检索数据。虽然这个 API 并非标准规范，但得到了浏览器厂商的支持。在实现 Web 应用程序时，使用 Web SQL API 可以提高应用程序的性能和响应速度。