什么是 persistjs
Persistjs 是一个用于在浏览器端实现持久化存储的 npm 包。它可以将数据存储在浏览器的 localStorage、sessionStorage、cookie 等地方，并且支持数据的自动压缩和加密。
Persistjs 主要的功能特点包括：
- 轻量级：体积小，压缩后只有约 5 KB。
- 简单易用：提供了简单直观的 API，只需几行代码就可以完成数据的存储和读取。
- 高度可定制：支持多种数据存储方式、数据压缩和加密、自定义垃圾回收等特性。
本篇文章将介绍如何使用 persistjs 来实现浏览器端的数据持久化存储。
安装 persistjs
首先，我们需要安装 persistjs。可以使用 npm 来进行安装：
npm install persist-js --save
安装成功后，我们可以在项目中引入 persistjs：
import Persist from 'persist-js'
存储数据
使用 Persist 存储数据非常简单，只需要调用 set(key, value) 方法即可：
const myData = {name: '张三', age: 18}
Persist.set('myData', myData)这里我们创建了一个对象 myData，然后将它存储到了 localStorage 中，key 为 'myData'。
Persist 还支持设置存储的有效期限：
Persist.set('myData', myData, {expires: 5 * 60 * 1000})这里我们让数据在 5 分钟后过期失效。如果不设置 expires 参数，则数据将一直有效。
读取数据
读取数据也非常简单，只需要调用 get(key) 方法即可：
const myData = Persist.get('myData')
console.log(myData) // 输出：{name: '张三', age: 18}持久化存储的数据还支持自动解密和自动解压缩：
Persist.set('myData', myData, {encrypt: true, gzip: true})
// ...
const myData = Persist.get('myData', {decrypt: true, gunzip: true})这里我们通过设置 encrypt 和 gzip 参数将数据进行了加密压缩，然后在读取时设置对应的 decrypt 和 gunzip 参数进行解密解压缩。
删除数据
如果需要删除某个键值对，可以使用 remove(key) 方法：
Persist.remove('myData')自定义存储器
默认情况下，Persist 使用 localStorage 进行数据存储。如果需要使用其他存储器，可以通过自定义存储器来实现。
比如，如果想使用 cookie 来存储数据，可以使用以下代码：
-- -------------------- ---- -------
----- ------------- - -
-------- -------- ----- -
------ --------------------
--
-------- -------- ----- ------ -
--------------- - -----------------
--
----------- -------- ----- -
--------------- - --------- -----------
-
-
-------- ------------------- -
--- ------ - ------------------------------------- - --- - -------------------
------ ------ - ------------ - --
-
----- ------- - --- ---------
-- --- ------- ------- -- ------------
---------------- -------------
--在此代码中，我们创建了一个自定义存储器 cookieStorage，实现了 getItem、setItem 和 removeItem 方法。
然后，我们通过创建一个新的 Persist 对象，并将 persistentStore 设置为 cookieStorage，来使用 cookie 来进行数据存储。
总结
Persistjs 是一个轻量级且易用的 npm 包，可以方便地实现浏览器端的数据持久化存储。通过本篇教程，我们学习了基本的使用方式、如何设置有效期限、如何自动解密和解压缩、以及如何自定义存储器。希望本篇文章能对各位前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc381e8991b448dd1e2