在前端开发中，我们常常需要使用浏览器的 IndexedDB 来保存数据，但是操作 IndexedDB 的 API 较为底层，使用起来不太方便。因此，我们可以使用第三方的 npm 包 indexed-db-stream 来简化 IndexedDB 的操作。
简介
indexed-db-stream 是一个能够简化 IndexedDB 操作的库，它帮助我们将 IndexedDB 存储的数据流转换为可简单读取的对象流。这使得我们可以像读取文件流一样用流式操作 IndexedDB，大大提高了数据的操作效率。
安装
安装 indexed-db-stream 很简单，只需要在终端中执行以下命令即可：
npm install indexed-db-stream
使用教程
下面是 indexed-db-stream 的基本使用教程：
1. 引入库
我们首先需要引入 indexed-db-stream，可以通过以下方式引入：
import { indexedDB } from 'indexed-db-stream';在上面的代码中，我们使用 ES6 中的 import 语法将 indexedDB 引入，也可以使用 CommonJS 的 require 语法引入。
2. 打开数据库
我们需要通过 indexedDB 来打开数据库，可以使用以下代码：
const db = indexedDB('myDB', 1);上述代码中，myDB 表示数据库名称，1 表示数据库版本。如果需要在数据库版本更新时升级数据库，需要在这里更新版本号。
3. 增加数据
添加数据可以使用 pipeline。首先我们需要创建一个 pipeline，然后使用 add() 方法向 pipeline 中添加数据。如下所示：
-- -------------------- ---- ------- ----- -------- - -------------------- --------------- --- -- ----- ------- ---- -- -- - --- -- ----- ------ ---- -- ----
这里我们将一个包含两个对象的数组添加到 pipeline 中。
4. 查询数据
查询数据也可以使用 pipeline。使用 pipeline 的 find() 方法可以查询出数据库中指定的数据。下面是查询数据的代码：
const pipeline = db.createPipeline();
pipeline.find({
id: 2
}).then(result => {
console.log(result);
});上述代码中，我们使用 find() 方法查询数据库中 id 为 2 的数据，并将查询结果输出到控制台中。
5. 修改数据
修改数据同样可以使用 pipeline，我们只需要使用 pipeline 的 update() 方法，并传入一个对象即可，如下所示：
const pipeline = db.createPipeline();
pipeline.update({
id: 2,
name: 'Tom Updated',
age: 22
});这里我们将 id 为 2 的数据的 name 和 age 字段进行了修改。
6. 删除数据
删除数据也可以使用 pipeline，我们只需要使用 pipeline 的 remove() 方法，并传入要删除数据的主键值即可，如下所示：
const pipeline = db.createPipeline(); pipeline.remove(1);
这里我们删除了主键值为 1 的数据。
结论
上述就是 indexed-db-stream 的基本使用教程。使用 indexed-db-stream 可以显著简化 IndexedDB 的操作过程，提高数据操作效率。使用时需要注意，IndexedDB 并不支持跨域读取，因此需要保证 IndexedDB 存储的数据与前端代码在同一域名下。
示例代码
-- -------------------- ---- ------- ------ - --------- - ---- -------------------- ----- -- - ----------------- --- -- ---- ----- -------- - -------------------- --------------- --- -- ----- ------- ---- -- -- - --- -- ----- ------ ---- -- ---- -- ---- ----- -------- - -------------------- --------------- --- - -------------- -- - -------------------- --- -- ---- ----- -------- - -------------------- ----------------- --- -- ----- ---- --------- ---- -- --- -- ---- ----- -------- - -------------------- -------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1781e8991b448dcadb