简介
storage-broth 是一个可以帮助在前端使用 localStorage 和 sessionStorage 的 npm 包。借助 storage-broth，我们可以方便地在前端应用中读写本地存储，实现数据持久化。
安装
我们可以通过 npm 快速安装 storage-broth：
npm install storage-broth --save
使用
使用 storage-broth 只需要一个简单的初始化：
import StorageBroth from 'storage-broth' const storage = new StorageBroth()
默认情况下，storage-broth 将读写 sessionStorage。如果你需要读写 localStorage，可以使用以下代码：
import StorageBroth from 'storage-broth'
const storage = new StorageBroth('local')之后，我们就可以使用 storage 对象来读写本地存储了。以下是 storage-broth 的 API：
set(key: string, value: any)- 用来设置一个 key-value 对，value 可以是任意类型。
get(key: string): any- 用来获取 key 对应的 value。
remove(key: string)- 用来删除 key 对应的数据。
clear()- 用来清空所有数据。
以下是一些示例代码：
-- -------------------- ---- ------- ----------------------- ----- ------------------------------------ -- ---- -------------------- --- --------------------------------- -- -- ----------------------- --------------------------------- -- --------- ---------------
持久化方案
storage-broth 默认使用 HTML5 的本地存储技术：sessionStorage 和 localStorage。但是在某些时候，我们希望存储的数据可以随着浏览器的关闭而消失。这时候，我们可以使用一些其他的方案来实现持久化存储。
其中一个非常受欢迎的方案是使用 IndexedDB。IndexedDB 提供了一个持久化的数据库，可以在浏览器关闭后存储数据。
以下是如何使用 IndexedDB 的示例代码：
-- -------------------- ---- -------
------ ------------ ---- ---------------
------ - ------ - ---- -----
----- ------ - -------
----- --------- - ----------
----- ------- - --- --------------
----- -------- ------------- -
-------------------------------
-
--- -- - ----
----- -------- ------- -
-- ----- -
-- - ----- -------------- -- -
-------- ----------
--
-
------ --
-
----- -------- -------- ------ -
----- -- - ----- -------
----- -- - ------------------------- ------------
------------------- ----
----- -------
-
----- -------- -------- -
----- -- - ----- -------
----- -- - ------------------------- -----------
------ -----------------
-
----- -------- ----------- -
----- -- - ----- -------
----- -- - ------------------------- ------------
--------------------
----- -------
-
----- -------- ------- -
----- -- - ----- -------
----- -- - ------------------------- ------------
----------------
----- -------
-
----------------------- -----
----------------- ---------------- -- ----
-------------------- ---
----------------- ------------- -- --
-----------------------
----------------- ------------- -- ---------
---------------在以上代码中，我们使用了 IndexedDB 存储数据，并且提供了 set、get、remove、clear 等操作数据的 API。注意，在使用 IndexedDB 的时候，我们需要先定义一个数据库和一个数据存储对象。在每一次操作数据的时候，我们需要打开数据库，获取事务（transaction）对象，然后根据操作类型（readwrite 或 readonly）进行读写操作，最后提交事务。
总结
storage-broth 是一个非常实用的 npm 包，在前端应用中可以方便地读写本地存储。通过 IndexedDB，我们可以实现更加高级的数据持久化方案。希望本文提供的教程对你有所帮助，也希望你在使用 storage-broth 时能够根据具体需求选择适合的持久化方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573ad81e8991b448e9a8d