前言
在前端开发中，我们经常需要使用本地存储来实现离线缓存、数据持久化等功能，IndexedDB 正是这方面的一种解决方案。但是，原生 IndexedDB API 很难使用，不易掌握，因此，我们需要使用一些类库来简化 IndexedDB 的使用，其中一款比较好用的类库就是 idb-rx。
本文将会介绍如何使用 npm 包 idb-rx，并且会提供详细的示例代码，帮助读者快速掌握如何使用该类库。
安装
在开始使用 idb-rx 前，我们首先需要安装该类库，可以使用 npm 或 yarn 来安装，具体命令如下：
npm install idb-rx --save
或者
yarn add idb-rx
安装完成后，就可以在项目中使用 idb-rx 了。
使用
使用 idb-rx 分为如下几个步骤：
- 连接 IDB 数据库
- 创建对象存储（table）
- 执行数据库操作（增删改查）
连接 IDB 数据库
连接 IDB 数据库的代码非常简单：
import { openDB } from 'idb-rx';
const databaseName = 'my-database';
const databaseVersion = 1;
const db$ = openDB(databaseName, databaseVersion);openDB 函数会返回一个被称为可观察对象的 rxjs 的 Subject 对象，我们可以使用它来监听数据库的打开过程，代码如下：
-- -------------------- ---- -------
--------------
-- -- -
--------------------- -------- ----
--
----- -- -
----------------------- ------- -------
--
-- -- -
--------------------- ------------
-
--创建对象存储
在 IndexedDB 中，对象存储用来存储数据。我们需要创建一个对象存储来存放我们的数据。创建对象存储的代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- ---------
----- ---------- - -----------
----- ------- - -----
----- ------ - ---------
----------- --
------------------------------------------- -- -
-- ---------- -
------ -------------------------- -------------------------------------
- ---- -
----- ----------- - -------------------------------- -
-------- --------
-------------- ----
---
------ ------------
-
--
-
--代码中，我们先判断数据库中是否已经有了一个名为 my-store 的对象存储，如果有，则打开这个存储以便我们对其进行数据存取操作，如果不存在，则创建一个新的对象存储，并且给这个对象存储指定一个自增长的 id 作为 key，方便我们对数据进行查询和删除操作。
执行数据库操作
有了连接和对象存储之后，我们就可以进行数据库的各种操作了，包括增删改查。示例代码如下：
-- -------------------- ---- -------
-- ----------
-----------------
----- -- -
----- ---- - - ----- ------- ---- -- --
----------------------- -- ----------------- ----- ------------ ---- --- ---------
--
----- -- ------------------- ---- ------- ------
--
-- ------------
-----------------
----- -- -
------------------------ -- ---------------- ------- -------
--
----- -- ------------------- --- ------- ------
--
-- --------------
-----------------
----- -- -
----- ----- - --------------------
----- ----- - ---------------------
--------------- -- ------------------ ------- -------
--
----- -- ------------------- ----- ------- ------
--
-- -- -- ----------
-----------------
----- -- -
----- -- - --
------------------------ -- ------------------- ---- ----------------
--
----- -- ------------------- ------ ------- ------
--
-- ----------
-----------------
----- -- -
----- ------- - - ----- ------- ---- -- --
----- -- - --
------------------ ----------- -- ------------------- ---- ----------------
--
----- -- ------------------- ------ ------- ------
--总结
本文介绍了如何使用 npm 包 idb-rx 来操作 IndexedDB 数据库，包括连接数据库、创建对象存储以及执行增删改查等操作。这种方式简单易用、可读性强，是一种非常好的数据库操作方案。希望读者可以通过本文了解到 idb-rx 的使用方案，并且能够成功地在实际项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f3781e8991b448dcc7b