数据存储之Web SQL

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

前言

在开发Web应用的过程中，会设计一些数据的存储需求，常见的存储方式可能有：保存登录态的Cookie；使用浏览器本地存储的LocalStorage和SessionStorage；客户端数据持久化存储方案涉及的WebSQL和IndexedDB；直接存储在本机的文件系统上等。

往期文章查看：

数据存储之Cookie｜ 8月更文挑战

数据存储之IndexedDB

本章主要讲述Web SQL的核心方法及示例。

WebSQL

Web SQL 是 HTML5 引入的数据库API，即一组使用SQL语句操作客户端数据库的API方法，如果熟悉SQL语法，那么理解Web SQL将会很容易。

怎样使用

Web SQL包含三个核心方法：openDatabase()、transaction()、executeSql()。要操作数据库首先需要使用 openDatabase() 方法，来打开或新建一个数据库对象，该方法接收五个参数，依次是：索要打开的数据库名称、版本号、描述文本、数据库大小及数据库创建完毕后的回调方法，最后一个参数也可默认，它默认会先去本地查询是否已有创建好的数据库，若无则创建一个新的数据库，代码示例如下：

const web_db = openDatabase('web_db', '1.0', 'Test WebSQL DB', 1024*1024)

当有了数据库对象后，便可调用transaction()方法以事务的方式操作数据库，该方法入参为事务处理函数，其中可以包含若干个 executeSql() 方法来执行相应的SQL语句，下面以创建一个名为LOGS的日志信息表并插入一条数据为例：

// 在web_db数据库中创建一张日志信息表
web_db.transacti0on(tx => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log, time)')
  tx.executeSql('INSERT INTO LOGS (id, log, time) VALUES (1, 'hello world', 1628087366562)')
})

执行SQL语句的executeSql()方法接收四个参数，分别是索要执行的SQL语句字符串，插入SQL查询语句中问号所在处的字符串数据，语句执行成功后的回调及失败的回调，代码示例如下：

// 向STU表格中添加一条数据
web_db.transaction(tx => {
  tx.executeSql('INSERT INTO STU (id, name) VALUES (?, ?)',
    [id, 'Jack'],
    () => console.log('添加数据成功'),
    (tx, err) => console.error('添加数据失败', err.message)
  )
})

总结

以上就是WebSQL的核心方法及示例，如果仅存储简单的字符串类型数据，可以使用LocalStorage 和 SessionStorage，当面对复杂的关系型数据时，便可使用Web SQl。