问题背景
在前端开发中，Redux 已经成为了一个不可或缺的状态管理工具。然而有时候会遇到一个问题：当用户进行页面刷新后，原本存在于 Redux 中的 state 数据会被清空，导致应用无法正常运作。这是由于在刷新页面时，Redux 中存储的数据并没有保存下来，而是全部被清除掉了。
问题原因
这个问题的根本原因在于在浏览器中刷新页面时，所有 JavaScript 变量和对象都会被重新创建和初始化。因此我们需要一种方法来让 Redux 的 state 数据在刷新后能够被重新加载。
解决方法
方案一：使用 LocalStorage 或者 SessionStorage
LocalStorage 和 SessionStorage 都是 HTML5 标准提供的 Web 存储方式，它们可以在客户端存储键值对数据，类似于 Cookie。我们可以通过让 Redux 状态存储到 LocalStorage 或者 SessionStorage 中来解决这个问题。当页面重新加载时，我们可以从 LocalStorage 或者 SessionStorage 中读取状态并将其填充到 Redux Store 中。具体实现方式如下：
-- -------------------- ---- -------
----- --------- - -- -- -
--- -
----- --------------- - -----------------------------
-- ---------------- --- ----- -
------ ---------
-
------ ---------------------------
- ----- ----- -
------ ---------
-
-
----- --------- - ------- -- -
--- -
----- --------------- - ---------------------
----------------------------- ----------------
- ----- -
-- ------ ----- ------
-
-
----- -------------- - -----------
----- ----- - ------------
------------
---------------
----------------------
-
------------------ -- -
-----------
-------------------
--
--方案二：使用 cookies
如果您的应用程序需要支持旧版浏览器，则可以使用 Cookie。将 Redux state 存储到 Cookie 中需要完成以下步骤：
- 将 state 转换为字符串。
- 使用 encodeURIComponent 编码该字符串。
- 将编码后的字符串存储在 cookie 中。
当我们在页面中重新加载应用程序时，我们可以通过读取 cookies 中的 state 并将其解码为 JavaScript 对象来恢复 Redux Store。
具体实现方式如下：
-- -------------------- ---- -------
------ ------ ---- ---------------
----- --------- - -- -- -
----- --------------- - --------------------
-- ---------------- --- ---------- -
------ ---------
-
------ -----------------------------------------------
-
----- --------- - ------- -- -
----- --------------- - -----------------------------------------
-------------------- ---------------- - ----- --- --
-
----- -------------- - -----------
----- ----- - ------------
------------
---------------
----------------------
-
------------------ -- -
-----------
-------------------
--
--总结
通过将 Redux state 存储到 LocalStorage、SessionStorage 或者 Cookie 中，我们可以很容易地解决浏览器刷新后数据丢失的问题。这种解决方案不仅可以应用于 React 和 Redux 应用程序，还可以用于几乎所有基于 JavaScript 的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f095abf6b2d6eab3a9d72c