简介
redux-session-storage 是一个用于在 Redux 状态树中存储数据到 sessionStorage 的 npm 包。它可以在 React 中，通过 Redux 状态管理器，方便地将数据存储到 sessionStorage 中，提高数据存储的安全性和可控性。
使用教程
1. 安装
在项目中安装 redux-session-storage
npm install redux-session-storage --save
2. 引入
在项目中引入 redux-session-storage
import reduxSessionStorage from 'redux-session-storage';
3. 配置
在 Redux 的 createStore 函数中，添加 redux-session-storage 的中间件，并传入 options
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------------ - ---- ------------------------
------ ----------- ---- -------------------------
----- ------- - -
---- -------------
------------ -------------
--
----- ----- - ------------
------------
----------------
----------------------------------
--
--
------ ------- ------属性说明：
- key: (可选) 在 sessionStorage 中存储的键名，如果未指定则会使用默认值 redux
- excludeKeys: 可选数组，不需要存储到 sessionStorage 的属性名
4. 存储数据
使用 Redux 中的 action 来存储数据到 sessionStorage 中。
export const setUser = (user) => {
return {
type: 'SET_USER',
payload: user,
useSessionStorage: true,
sessionStorageKey: 'user',
};
};在上面的例子中，useSessionStorage 和 sessionStorageKey 是 redux-session-storage 提供的属性，表示该数据需要存储到 sessionStorage 中，并使用 sessionStorageKey 指定数据在 sessionStorage 中的键名。
5. 取回数据
在需要用到存储到 sessionStorage 中数据的地方，如组件中，可以通过 props 获取数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - -- ---- -- -- -
------ -
-----
------- ------------
------
--
--
----- --------------- - ------- -- -
------ -
----- -----------
--
--
------ ------- ----------------------------------通过 mapStateToProps 函数将数据映射到组件的 props 上，供组件使用。
案例
在这个例子中，我们将使用 redux-session-storage 来存储一个应用的语言设置。在应用中，用户可以通过选择应用的语言来改变显示的界面上的语言。
首先，我们需要定义一个语言选择器的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------- - ---- -----------------------------
----- ---------------- - -- --------- ----------- -- -- -
----- ------------ - ------- -- -
--------------------------------
--
------ -
------- ---------------- ------------------------
------- ------------------------------
------- -------------------------
---------
--
--
----- --------------- - ------- -- -
------ -
--------- ---------------
--
--
----- ------------------ - -
------------
--
------ ------- ------------------------ --------------------------------------这个组件使用了 Redux 的 connect 函数，将组件的属性和 Redux 状态管理器的属性进行映射。当组件的选择框中选中了一种语言时，它会触发 setLanguage action，将选择的语言存储到 sessionStorage 中。
export const setLanguage = (language) => {
return {
type: 'SET_LANGUAGE',
payload: language,
useSessionStorage: true,
sessionStorageKey: 'language',
};
};在 store 中，我们根据 options 中指定的 key 为 myAppState 来查找存储在 sessionStorage 中的数据。
-- -------------------- ---- -------
----- ------- - -
---- -------------
--
----- ------------ - -
--------- ---------------------------------------------------- -- --------
--
----- --------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------
------ -
---------
--------- ---------------
--
--------
------ ------
-
--
------ ------- ----------------通过这种方式，我们将语言选择设置存储在 sessionStorage 中。这样在同时启用多个实例时，语言设置的数据可以被存储在其自己的 sessionStorage 中，而不会被其他实例共享。同时，由于使用了 Redux，我们可以轻松地读写这些数据，并将它们传递给整个应用程序中其他的状态和组件。
总结
redux-session-storage 是一个方便的 npm 包，可以通过 Redux 实现存储和读取数据到 sessionStorage 中。它可以提高数据的安全性和可控性，减少了代码的复杂性。通过本文的介绍，相信读者已经掌握了它的基本使用方法，可以在实际项目中应用它，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b0a