WebSQL（已废弃）

WebSQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

在 WebSQL 中，有 3 个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库

使用 openDatabase( ) 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：

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

在上面的代码中，尝试打开一个名为 mydb 的数据库，因为第一次不存在此数据库，所以会创建该数据库，版本号为 1.0，大小为 2M。

openDatabase( ) 方法对应的 5 个参数：

数据库名称
版本号
描述文本
数据库大小
创建回调

第 5 个参数，创建回调会在创建数据库后被调用。

执行操作

执行操作使用 database.transaction( ) 函数：

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

上面的语句执行后会在 'mydb' 数据库中创建一个名为 FIRSTTABLE 的表。

该表存在 2 个字段 id 和 log，其中 id 是唯一的。

插入数据

在执行上面的创建表语句后，我们可以插入一些数据：

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)');
    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (1, "张三", 18)');
    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (2, "李四", 20)');
});

在上面的代码中，创建了一张名为 STU 的表，该表存在 3 个字段 id，name 和 age。

之后往这张表中插入了 2 条数据。

也可以使用动态值来插入数据：

var stuName = "王五";
var stuAge = 18;
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)');
    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (3, ?, ?)', [stuName, stuAge]);
});

在上面的代码中，使用动态值的方式插入了一条数据，实例中的 stuName 和 stuAge 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。

读取数据

以下实例演示了如何读取数据库中已经存在的数据：

<div id="status"></div>

var stuName = "王五";
var stuAge = 18;

// 打开数据库

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)');

    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (1, "张三", 18)');

    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (2, "李四", 20)');

    tx.executeSql('INSERT INTO STU (id, name, age) VALUES (3, ?, ?)', [stuName, stuAge]);

});

    

// 读取操作

db.transaction(function (tx) {

    tx.executeSql('SELECT * FROM STU', [], 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).name + ":" + results.rows.item(i).age + "</b></p>";

            document.querySelector('#status').innerHTML += msg;

        }

    }, null);

});

在上面的代码中，第二个部分是读取数据的操作。这里仍然是使用的 executeSql( ) 方法来执行的 SQL 命令，但是用法又不一样了。是时候来看一下完整的 executeSql( ) 方法是什么样了。

executeSql(sqlStatement, arguments, callback, errorCallback)

该方法完整的语法实际上是接收 4 个参数，分别是：

- SQL 语句

- 参数

- 执行 SQL 语句后的回调

- 错误回调

因此在上面的示例中，executeSql( ) 的第三个参数就是执行了 SQL 语句后的回调。在回调中可以通过 results.rows 拿到该表中的数据，之后对数据进行业务需求的操作即可。

删除数据

删除数据也是使用 SQL 中的语法，同样也支持动态指定的方式。

var stuID = 2;
// 删除操作
db.transaction(function (tx) {
    tx.executeSql('DELETE FROM STU  WHERE id=1');
    tx.executeSql('DELETE FROM STU WHERE id=?', [stuID]);
});

在上面的代码中，删除了 id 为 1 和 2 的两条数据，其中第二条是动态指定的。

修改数据

要修改数据也是使用 SQL 中的语法，同样也支持动态指定的方式。

var stuID = 3;
// 更新操作
db.transaction(function (tx) {
    tx.executeSql('UPDATE STU SET name=\'王麻子\' WHERE id=3');
    tx.executeSql('UPDATE STU SET age=21 WHERE id=?', [stuID]);
});

在上面的代码中，修改了 id 为 3 的学生，名字修改为“王麻子”，年龄修改为 21。