浏览器🧑‍💻 浏览器的离线存储-WebSQL

2021-05-04 | 2024-05-09 | 1.5k | 6 分钟

浏览器离线存储概述

一起来看一下 Data Persistence/storage 这个部分，翻译成中文叫做浏览器离线存储或者本地存储；顾名思义，就是内容存储在浏览器这一边；

目前常见的浏览器离线存储的方式如下：

Cookie

Web Storage

WebSQL

IndexedDB

File System

WebSQL 介绍

WebSQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIS，最新版的 Safari、Chrome 和 Opera 浏览器都支持 WebSQL；
在 WebSQL 中，有 3 个核心方法：
1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象；
2. transaction：这个方法能够控制一个事务，以及基于这种情况执行提交或者回滚；
3. executeSql：这个方法用于执行实际的 SQL 查询；

WebSQL 实操

打开数据库

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

/**
 * 参数：
 * 1. 数据库名称
 * 2. 版本号
 * 3. 描述文本
 * 4. 数据库大小
 * 5. 创建回调：会在创建数据库后被调用
 */
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024, () => {
  // todo
});

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

执行操作

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

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

上面的语句执行后会在 mydb 数据库中创建一个名为 LOGS 的表；该表存在 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 (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]);
});

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

注意：由于上一次操作已经插入了 id 为 1 和 2 的数据，所以这一次插入内容时，要将前面两次插入语句注释调，否则插入操作不会成功；因为这里是一个事务，前面失败了会导致后面也失败；

读取数据

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

html

JavaScript

<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( ) 方法是什么样了；
```
/**
 * 参数：
 * 1. SQL 语句
 * 2. 参数
 * 3. 执行 SQL 语句后的回调
 * 4. 错误回调
 */
executeSql(sqlStatement, arguments, callback, errorCallback)
```
在上面的示例中，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；

总结

目前来看 WebSQL 已经不再是 W3C 推荐规范，官方也已经不再维护了；原因说的很清楚，当前的 SQL 规范采用 SQLite 的 SQL 方言，而作为一个标准，这是不可接受的；

另外 WebSQL 使用 SQL 语言来进行操作，更像是一个关系型数据库，而 IndexedDB 则更像是一个 NoSQL 数据库，这也是目前 W3C 强推的浏览端数据库解决方案；

可以参阅下面的资料进行扩展阅读：

View Web SQL data（需要搭梯子）

CSDN WebSQL

打赏作者

您的打赏是我前进的动力

微信

支付宝

浏览器🧑‍💻 浏览器的渲染流程

浏览器🧑‍💻 浏览器的离线存储-IndexedDB

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 浏览器离线存储概述
2. WebSQL 介绍
3. WebSQL 实操
4. 总结