WebSQL：浏览器端的 SQL 数据库

在 Web 开发的众多技术中，WebSQL 曾经是一个备受关注的客户端数据库解决方案。虽然它并不是 HTML5 规范的一部分，但它作为一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 API。

一、WebSQL 简介

WebSQL 是一个基于 SQL 的客户端数据库解决方案，它允许开发者在浏览器端创建、操作和存储数据。如果你熟悉像 MySQL 这样的关系型数据库，那么 WebSQL 对你来说将会非常容易上手。目前，最新版的 Safari、Chrome 和 Opera 浏览器都支持 WebSQL。

二、WebSQL 的核心方法

WebSQL 提供了三个核心方法，分别是 openDatabase、transaction 和 executeSql。这些方法共同构成了 WebSQL 的基础操作。

（一）`openDatabase`

openDatabase 方法用于打开一个已存在的数据库，如果数据库不存在，则会创建一个新的数据库。它的语法如下：

javascript 复制代码

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

在上面的代码中，我们尝试打开一个名为 mydb 的数据库。如果该数据库不存在，则会创建一个版本号为 1.0、大小为 2MB 的新数据库。

（二）`transaction`

transaction 方法用于控制一个事务，以及基于这种情况执行提交或者回滚。它的语法如下：

javascript 复制代码

db.transaction(function (tx) {
    // 在这里执行 SQL 操作
});

（三）`executeSql`

executeSql 方法用于执行实际的 SQL 查询。它的语法如下：

javascript 复制代码

tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');

三、WebSQL 的基本操作

（一）创建表

以下是创建表的示例代码：

javascript 复制代码

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS STU (id unique, name, age)');
});

在上面的代码中，我们创建了一张名为 STU 的表，该表包含 id、name 和 age 三个字段。

（二）插入数据

以下是插入数据的示例代码：

javascript 复制代码

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (1, "张三", 18)');
    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (2, "李四", 20)');
});

在上面的代码中，我们向 STU 表中插入了两条数据。

（三）读取数据

以下是读取数据的示例代码：

javascript 复制代码

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM STU', [], function (tx, results) {
        var len = results.rows.length, i;
        for (i = 0; i < len; i++) {
            console.log(results.rows.item(i).name + ":" + results.rows.item(i).age);
        }
    }, null);
});

在上面的代码中，我们从 STU 表中读取了所有数据，并在控制台中打印出来。

（四）删除数据

以下是删除数据的示例代码：

javascript 复制代码

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('DELETE FROM STU WHERE id=1');
});

在上面的代码中，我们从 STU 表中删除了 id 为 1 的数据。

（五）修改数据

以下是修改数据的示例代码：

javascript 复制代码

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('UPDATE STU SET name="王羲之" WHERE id=3');
});

在上面的代码中，我们将 STU 表中 id 为 3 的数据的 name 字段修改为 "王羲之"。

四、WebSQL 的现状

目前来看，WebSQL 已经不再是 W3C 推荐规范，官方也已经不再维护了。原因在于 WebSQL 采用的是 SQLite 的 SQL 语言，而作为一个标准，这是不可接受的。此外，IndexedDB 作为目前 W3C 推荐的浏览器端数据库解决方案，更像是一个 NoSQL 数据库，它提供了更灵活的数据存储方式。

WebSQL：浏览器端的 SQL 数据库