在前端开发中，存储数据是一个非常普遍的需求。而在 JavaScript 中，我们可以使用 localStorage、sessionStorage 等浏览器自带的存储方式来实现。但是它们的存储容量有限，而且数据只在同一个域名下有效。所以，我们可能需要一种更加灵活的存储方式。而这时可以使用 bstorage，一个依赖于浏览器 IndexedDB 的 npm 包。
bstorage 的安装和基本使用
安装 bstorage 很简单，只需要在命令行中运行如下命令：
--- ------- --------
bstorage 的基本使用也很简单，首先需要导入包：
------ -------- ---- -----------
然后就可以创建一个 Bstorage 对象，并存储数据：
----- ----- - --- ----------- ---------------- ---------
需要注意的是，Bstorage 存储的数据是异步保存的，因此我们应该使用 await 或者 Promise 风格的写法来确保数据已经成功保存到 IndexedDB 中：
----- ---------------- --------- -- -- ---------------- ---------------- -- ----------------------
同样地，我们也可以使用 get 方法来获取数据：
----- ----- - ----- -----------------
如果想要删除某个键值对，可以使用 remove 方法：
--------------------
bstorage 也支持批量操作，例如一次添加多个键值对：
---------------- ----- --------- ----- -------- ---
批量获取：
----- ------ - ----- ---------------------- --------
批量删除：
------------------------- --------
bstorage 的进阶使用
除了基本的增删改查操作，bstorage 还提供了很多有用的功能。
配置存储库名和版本号
bstorage 默认使用名为 bstorage 的数据库存储数据。如果我们想使用一个不同的库名，可以在创建 Bstorage 对象时传入一个 options 对象：
----- ----- - --- ---------- ------- ------ ---
同样地，我们也可以指定库的版本号：
----- ----- - --- ---------- ------- ------- -------- - ---
对于库的版本号，当我们需要新增存储字段或者修改存储结构时，应该执行数据库迁移。例如，我们可以在属性 onUpgradeNeeded 中执行数据库迁移：
----- ----- - --- ----------
------- -------
-------- --
---------------- ---------- -- -
------------------------------------- - -------- ---- ---
--
---这里，我们新增了一个名为 mystore 的 object store，并且指定了其主键为 id。
设置过期时间
bstorage 还提供了设置过期时间的功能。我们可以在 set 方法中传入一个 options 对象，其中的字段 exp 表示过期时间（单位：秒）：
---------------- -------- - ---- -- --- -- - -----
过期后，我们使用 get 方法获取数据会返回 null。
自动序列化和反序列化
bstorage 还提供了自动序列化和反序列化的功能。如果我们存储一个对象，bstorage 会自动将其序列化为字符串，而在获取数据时，bstorage 会自动将其反序列化为对象。
例如，这里我们存储了一个包含 name 和 age 两个属性的对象：
------------------- - ----- ------- ---- -- ---
当我们使用 get 方法获取数据时，bstorage 会自动将返回的字符串反序列化为对象：
----- ------ - ----- -------------------- -------------------- -- - ----- ------- ---- -- -
内置加密和解密
bstorage 还提供了内置加密和解密的功能。我们可以通过传入一个加密解密密钥，来使存储的数据更加安全。
创建 Bstorage 对象时，我们可以传入一个密钥 options.secretKey：
----- ----- - --- ---------- ---------- ------------- ---
设置密钥之后，存储的数据使用 AES 加密算法加密，并且在读取时自动解密。
bstorage 的指导意义
bstorage 的出现，使得前端存储数据更加灵活和方便。它提供了很多有用的功能，例如可以指定库名和版本号、设置过期时间、自动序列化和反序列化以及内置加密和解密等。这些功能可以帮助我们更好地管理数据，提升前端开发体验。
示例代码
------ -------- ---- -----------
------ -- -- -
----- ----- - --- ---------- ---------- ------------- ---
-- -------
----- ---------------- -------- - ---- -- ---
-- ----
----- ----- - ----- -----------------
-- ----
--------------------
-- ----
---------------- ----- --------- ----- -------- ---
----- ------ - ----- ---------------------- --------
------------------------- --------
-- ----------
------------------- - ----- ------- ---- -- ---
----- ------ - ----- --------------------
--------------------
-- --------
----- ------ - --- ----------
------- -------
-------- --
---------------- ---------- -- -
------------------------------------- - -------- ---- ---
--
---
-----来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaa22b5cbfe1ea061036a