Web SQL 学习笔记

一. 基础入门

Web SQL 数据库的开发者使用了与 SQL 后端（Sqlite）同样的规范，目前已经停止维护。支持常规的增删改查，事物，回滚等操作。

目前很少有大的互联网公司使用 Web SQL 进行数据存储，但是它在桌面应用(如：electron)以及手机应用中存储数据还是很香的。

1，创建数据库

方法：openDatabase
参数：(数据库名称 版本号 描述文本 数据库大小 创建回调)
示例：

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

2，事物
方法：transaction
说明：保持逻辑数据一致性和可恢复性，事物一般包含具有关联逻辑的一系列操作，当某个操作执行失败时，进行数据回滚，回到最初的状态，Web SQL 除了创建 db 以外所有操作都通过事物来执行。
3，执行 SQL
方法：executeSql
示例：

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

4，数据库查询语句

常规的数据库操作包括以下几类：
DQL：Data Query Language ， 数据查询。一般为 select ，from 和 where 等组成。
DML：Data Manipulation Language，数据操作语言。一般为 insert / update/delete 等
DPL：事物处理语言，事务处理语句能确保被 DML 语句影响的表的所有行及时得以更新
DCL：通过 GRANT 和 REVOKE，确定单个用户或用户组对数据库对象的访问权限
DDL：常用的有 CREATE 和 DROP，用于在数据库中创建新表或删除表，以及为表加入索引等
CCL：DECLARE CURSOR、FETCH INTO 和 UPDATE WHERE CURRENT 用于对一个或多个表单独行的操作

二. 示例：

以创建学生表为例：

建库建表

• 建库建表

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

• 插入数据

db.transaction(function (tx) {
    tx.executeSql('INSERT INTO STUDENTS (id,name ,age) VALUES (1,"张三",18)');
    tx.executeSql('INSERT INTO STUDENTS (id,name ,age) VALUES (2,"李四",19)');
    tx.executeSql('INSERT INTO STUDENTS (id,name ,age) VALUES (3,"王五",20)');
});

• 删除数据

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM STUDENTS  WHERE id=1');
});

• 修改数据

db.transaction(function (tx) {
   tx.executeSql('UPDATE STUDENTS SET name="史密斯" WHERE id=1');
   tx.executeSql('UPDATE STUDENTS SET age="21" WHERE id=2');
   tx.executeSql('UPDATE STUDENTS SET name="特鲁朗普" WHERE id=3');
});

• 查询数据

    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM STUDENTS', [], function (tx, results) {
            var len = results.rows.length,
                i;
            for (i = 0; i < len; i++) {
                console.log(JSON.stringify(results.rows.item(i)));
            }
        });
    });

依次执行以上操作，输出结果：

    {"id":1,"name":"史密斯","age":18}
    {"id":2,"name":"李四","age":"21"}

通过结果可以分析：
执行新增/删除/修改结果均已生效
修改 id 为 3 的所在行，该行不存在并不影响整体执行成功

三. 拓展

持久化
通过控制台 -> Storage -> Web SQL -> mydb -> STUDENTS 能看到存储的内容。
通过关闭浏览器，重新打开执行查询语句我们会发现结果依然存在

清空数据库
可以通过控制台 -> Application -> Clear Storage 清空 Web SQL 的内容。

事物结果
当在事物中执行多次操作时，如果仅执行失败，未抛出异常情况下整体执行成功。如果需要捕获事物执行结果，可以在 transaction 第二个参数传入异常处理函数

db.transaction(function (tx) {
    tx.executeSql('UPDATE STUDENTS SET name2="史密斯" WHERE id=1');
    tx.executeSql('UPDATE STUDENTS SET age="22" WHERE id=2');
}, (err)=> {
    console.log(err)
});

执行结果：

SQLError {code: 5, message: "could not prepare statement (1 no such column: name2)"}

此时，id 为 2 的 set 操作不会成功。当没有产生错误时，transaction 的回调 err 变量将为 undefined。

快捷操作

当新建好数据库及表后可以在 Application 快捷输入 SQL 语法进行增删改查