介绍
websql 是一种在 Web 端基于 SQLite 的数据库解决方案。它允许您在浏览器中创建和管理本地数据库，并使用 SQL 查询语言进行检索和写入操作。而我们可以使用 npm 包 websql 来轻松实现这一功能。
这个教程将教您如何使用 npm 包 websql 来创建和管理数据库，并进行读写操作。
安装
使用 npm 可以非常方便地安装 websql 包：
npm install websql --save
注意：在使用之前请确保浏览器支持 websql 数据库。
创建数据库
要创建一个 websql 数据库，我们可以使用如下代码：
import { openDatabase } from 'websql'
const db = openDatabase('mydb', '1.0', 'A sample database', 2 * 1024 * 1024)其中，openDatabase 函数接收四个参数：
- 数据库名称
- 版本号
- 描述信息
- 数据库大小限制
如果成功创建，则该函数会返回一个数据库对象，我们将其保存在 db 变量中。
创建表格
现在我们已经创建了一个数据库对象，接下来我们可以使用 SQL 查询语句来创建一个表格：
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS mytable (id unique, name, age)')
})这里的 transaction 函数只是用来包裹数据库操作的函数，它能够保证数据库的操作是原子性的。执行 SQL 语句时，我们可以使用 executeSql 函数，并将 SQL 查询语句作为参数传递给它。在这个例子中，我们创建了一个名为 mytable 的表格，其中 id 列具有唯一值限制，而 name 和 age 列并未添加任何限制。
插入数据
要向表格中插入数据，我们使用 executeSql 函数，并传递一个 INSERT 查询语句：
db.transaction(function(tx) {
tx.executeSql('INSERT INTO mytable (id, name, age) VALUES (?, ?, ?)', [1, 'John Doe', 25])
})这里的 VALUES 语句指示我们要插入的数据。在这个例子中，我们插入了一条具有 id、name 和 age 列值的数据。
查询数据
要查询数据，我们可以使用 SELECT 查询语句：
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM mytable', [], function(tx, results) {
console.log('Returned rows:', results.rows.length)
})
})这里的 SELECT 语句指示我们要查询 mytable 表格的所有列，并返回 results 对象。
更新数据
要更新表格中的数据，我们可以使用 UPDATE 查询语句：
db.transaction(function(tx) {
tx.executeSql('UPDATE mytable SET name = ? WHERE id = ?', ['Jane Doe', 1])
})这里的 SET 语句指示要更新的列，而 WHERE 语句指示要更新的具体行。在这个例子中，我们将名称更改为 "Jane Doe"，并且仅更新 id 值为 1 的数据。
删除数据
要删除表格中的数据，我们可以使用 DELETE 查询语句：
db.transaction(function(tx) {
tx.executeSql('DELETE FROM mytable WHERE id = ?', [1])
})这里的 DELETE 语句指示要删除的行，而 WHERE 语句指示要删除的具体行。在这个例子中，我们删除了 id 值为 1 的数据。
结论
现在我们已经了解了如何使用 npm 包 websql 来创建和管理数据库。虽然并不是所有的浏览器都支持 websql 解决方案，但这对于需要在 Web 中存储数据的前端开发人员来说是非常有用的。如果尝试使用 websql 时遇到任何问题，可以查看 npm 包的文档以获得更多帮助。
示例代码
完整的示例代码：
-- -------------------- ---- -------
------ - ------------ - ---- --------
----- -- - -------------------- ------ -- ------ ---------- - - ---- - -----
--------------------------- -
--------------------- ----- -- --- ------ ------- --- ------- ----- ------
--
--------------------------- -
--------------------- ---- ------- ---- ----- ---- ------ --- -- ---- --- ----- ----- ----
--
--------------------------- -
--------------------- - ---- --------- --- ------------ -------- -
--------------------- ------- --------------------
--
--
--------------------------- -
--------------------- ------- --- ---- - - ----- -- - --- ------ ----- ---
--
--------------------------- -
--------------------- ---- ------- ----- -- - --- ----
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70058