对于使用 Redux 架构的前端项目来说，持久化管理和本地储存是十分重要的一环，尤其是对于需要长时间储存用户状态的应用程序来说。在本文中，我们将会介绍一些关于 Redux 持久化管理和本地储存的方法，以及如何将它们应用到你的项目中。
Redux 状态的持久化管理
在大多数情况下，Redux 管理着我们应用中所有的状态，这些状态都保存在一个单一的状态树中，并被称为 Store。我们可能有各种各样的状态需要长时间储存，例如用户身份验证、购物车、购买历史等等，这些状态是我们在进行页面刷新或者关闭浏览器后需要保存的状态。
为了实现状态的持久化管理，我们需要使用一个可持久化的存储库，以便将状态持久化到本地存储中。Redux 插件中有一种非常流行的、易于使用的存储库，叫做 redux-persist。redux-persist 允许我们将 Redux Store 中的状态持久化到本地存储（如 localStorage，indexedDB 或 AsyncStorage）中，并且提供了一些灵活的配置选项。
让我们看一下如何使用 redux-persist 进行状态的持久化管理：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- -- ----- ---------------- - ----------------------------- ------------- ------ ------- -- -- - --- ----- - ------------------------------ --- --------- - -------------------- ------ - ------ --------- -- --
首先，我们需要安装 redux-persist 并将其导入到文件中。然后，我们需要使用 persistReducer 高阶函数将我们的 reducer 包装成一个新的 reducer，并传递一个名为 persistConfig 的配置对象，其中包含两个属性：key 和 storage。key 用于指定根储存键，这个键被用于存储所有的持久化状态。storage 属性告诉 redux-persist 应该使用哪个储存引擎来持久化状态。
一旦我们创建了一个已包装的 reducer，我们就可以在 createStore() 函数中使用它。然后，我们可以使用 persistStore 函数来创建一个持久化存储对象 persistor，它将在我们的应用程序中被使用。
我们现在已经完成了使用 redux-persist 进行状态的持久化管理的所有设置。让我们看看在实际应用程序中如何使用它来保存用户的购物车：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
----- -------------- - -------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ -
---------
---------------
--
---- --------------
------ ----------------- -- ------- --- ----------------
--------
------ ------
-
--
----- ------------- - -
---- ---------------
--------
--
----- -------------------- - ----------------------------- -------------
------ -
-------------------- -- --------
--
在上面的代码示例中，我们定义了一个名为 cartReducer 的 reducer。这个 reducer 管理着用户购买的商品状态，并且需要长时间保存以便在下一次用户访问时保持其状态不变。我们可以使用 redux-persist 的 persistReducer 函数将这个 reducer 包装起来，然后将其导出并在项目中用作我们的根 reducer。
本地储存
在 React 应用程序中，我们经常使用本地储存来缓存数据或保存用户设置。本地储存是一种用于在浏览器中保存数据的机制，它可以帮助我们跨会话（或在页面重载）的过程中保留我们的数据。
在本文中，我们将会介绍两种使用本地储存的方式：localStorage 和 Cookies。
使用 localStorage
localStorage 是一个跨浏览器本地储存 API，它提供了一组键值对来保存数据并将其持久化到用户的浏览器中。localStorage 是以域名为单位进行储存的，它的 API 可以直接从全局变量 window 对象上访问，其中最常用的 API 是 getItem 和 setItem。
我们可以通过两个步骤来使用 localStorage。首先，我们需要将值放入 localStorage 中，然后我们就可以使用 getItem 函数来获取该值了：
localStorage.setItem('myKey', 'myValue');
const myValue = localStorage.getItem('myKey');使用 Cookies
Cookies 是另一种常见的 web 储存方式，它们保存在用户计算机上，可以在每次访问特定域时被浏览器自动发送。因为每个 Cookie 只能存储 4KB 的数据，所以最好只使用它们来保存小的、不敏感的数据。
下面是一个 Cookie 的示例：
-- -------------------- ---- ------- -- -- ------ --------------- - ---------------- ------------ -- --- ---- -------- ---- -------- -- -- ------ ----- ------- - ---------------------------------------- -------- -- - ------------------- - ------------------------------- ---------------------------- -- -- ---- ----- ------------- - --------------------
在上面的示例中，我们在客户端执行了两个操作：首先在客户端设置了一个名为 myCookie 的 Cookie，然后我们使用 document.cookie 对象获取了所有客户端设置的 Cookie，进而获取了我们刚刚设置的 Cookie 的值。
总结
在本文中，我们介绍了如何使用 redux-persist 进行 Redux 状态的持久化管理，以及如何使用 localStorage 和 Cookies 对数据进行本地储存。这些技术对于提高应用程序性能并增强用户体验都十分重要，希望本文能帮助你更深入地学习它们，并将它们应用于你的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e0978968c7c53b0071ccb