npm 包 redux-session-storage-gatorade 使用教程

简介

redux-session-storage-gatorade 是一个状态管理库 redux 的扩展，它提供了一个简单的方式将 redux 的状态保存到浏览器本地存储中，并且支持使用加密算法对状态进行加密保护。它使用了 sessionStorage 作为数据存储介质，因此可以避免 cookies 和 localStorage 的一些限制，比如在隐身模式下cookies不可用的问题。

本教程将介绍如何安装、配置和使用 redux-session-storage-gatorade。

安装

使用 npm 安装：

--- ------- ------------------------------

配置

在你的 redux 应用中添加 redux-session-storage-gatorade 插件。首先创建一个中间件来保存数据到 sessionStorage：

-- ---------------------

------ ----- --------- - -- -- -
  --- -
    ----- ----------- - --------------------------------
    -- ------------ --- ----- -
      ------ ----------
    -
    ------ ------------------------
  - ----- ----- -
    -----------------
    ------ ----------
  -
--

------ ----- --------- - ----- -- -
  --- -
    ----- ----------- - ----------------------
    ------------------------------- -------------
  - ----- ----- -
    -----------------
  -
--

然后将其添加到 redux 的中间件列表中：

-- ---------------------

------ - ------------ ---------------- ------- - ---- --------
------ --------------- ---- --------------
------ - ---------- --------- - ---- -------------------
------ ----------- ---- -------------

----- ---------- - ------------------

----- ----------------- - --------
  -------------------------------
  ----------------------------------- -- -------------------------------------
--

----- -------------- - ------------

----- ----- - ------------
  ------------
  ---------------
  -----------------
--

------------------ -- -
  -----------
    -------- ------------------------
  ---
---

------ ------- ------

现在，每当 redux 的状态改变时，配置的中间件将自动将新的状态保存到 sessionStorage 中。

使用

在你的 redux 应用中使用 redux-session-storage-gatorade 插件：

-- ---------------------

------ - --------------- - ---- --------
------ - -------------- - ---- ---------------------------------
------ -------------- ---- -------------------

----- ------------- - -
  ---- -------
  -------- ------
  -------- --------------
--

----- ----------- - -----------------
  -------- ----------------------------- ---------------
---

------ ------- ------------

在这个例子中，我们将 counterReducer 的状态保存在 sessionStorage 中，并使用一个 key（root）将其存储在 sessionStorage 中。我们还可以指定是否加密（encrypt）存储的数据。

现在，你的 redux 应用会将新的状态自动保存到 sessionStorage 中，且当用户刷新页面后，应用会从 sessionStorage 中恢复之前的状态。

示例代码

下面是一个计数器应用的完整示例代码，使用了 redux-session-storage-gatorade 插件。

-- ----------

------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- --------- - ---- ------------

-------- ----- -
  ----- ------- - ----------------- -- ---------------
  ----- -------- - --------------

  ------ -
    ---- ----------------
      ------------ --------------
      ------- ----------- -- ---------------------------------
      ------- ----------- -- ---------------------------------
    ------
  --
-

------ ------- ----
-- --------------------

------ ----- --------- - -- -- --
  ----- -----------
---

------ ----- --------- - -- -- --
  ----- -----------
---
-- ------------------------------

----- -------------- - ------ - -- ------- -- -
  ------ ------------- -
    ---- ------------
      ------ ----- - --
    ---- ------------
      ------ ----- - --
    --------
      ------ ------
  -
--

------ ------- ---------------
-- ---------------------

------ ----- --------- - -- -- -
  --- -
    ----- ----------- - --------------------------------
    -- ------------ --- ----- -
      ------ ----------
    -
    ------ ------------------------
  - ----- ----- -
    -----------------
    ------ ----------
  -
--

------ ----- --------- - ----- -- -
  --- -
    ----- ----------- - ----------------------
    ------------------------------- -------------
  - ----- ----- -
    -----------------
  -
--
-- ---------------------

------ - --------------- - ---- --------
------ - -------------- - ---- ---------------------------------
------ -------------- ---- -------------------

----- ------------- - -
  ---- -------
  -------- ------
  -------- --------------
--

----- ----------- - -----------------
  -------- ----------------------------- ---------------
---

------ ------- ------------
-- ---------------------

------ - ------------ ---------------- ------- - ---- --------
------ --------------- ---- --------------
------ - ---------- --------- - ---- -------------------
------ ----------- ---- -------------

----- ---------- - ------------------

----- ----------------- - --------
  -------------------------------
  ----------------------------------- -- -------------------------------------
--

----- -------------- - ------------

----- ----- - ------------
  ------------
  ---------------
  -----------------
--

------------------ -- -
  -----------
    -------- ------------------------
  ---
---

------ ------- ------

使用上面的示例代码，你可以创建一个计数器应用，并使用 redux-session-storage-gatorade 插件将其状态保存到 sessionStorage 中。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005731481e8991b448e93ee

阅读全文

猜你喜欢

  • npm 包 web-perf-test 使用教程

    在现代 Web 开发中，性能已经成为了一个至关重要的问题。为了保证我们的 Web 应用程序能够达到更高的性能水平，我们需要对它的性能进行测量和优化。而这时候，一个名为 web-perf-test 的 ...

    3 年前
  • npm 包 names-microlib 使用教程

    在前端开发中，我们经常需要操作字符串。在处理字符串时，我们可能需要对字符串进行基本操作，比如格式化、裁剪、替换等。此时，我们可以使用 npm 包 names-microlib。

    3 年前
  • npm 包 razzle-babel-7 使用教程

    在前端开发中，我们常常需要使用一些工具和包来协助我们完成工作。其中一个非常常用的工具就是 npm 包，它为我们提供了大量的模块和库来解决我们在开发中遇到的各种问题。

    3 年前
  • npm 包 react-treebeard-toggle 使用教程

    React-treebeard-toggle 是一个 React 组件库，提供了一种扩展树形结构的显示方式。它可以显示一个带收缩/展开按钮的树形结构，支持自定义节点样式以及回调函数。

    3 年前
  • npm包：redux-enhancer的使用教程

    前言 在前端开发中，状态管理是非常重要的一部分。Redux 是一种极其流行的状态管理库。它使得状态管理更加易于维护和控制。Redux提供了一个灵活的 API，使得开发者可以深入自定义 Redux 数据...

    3 年前
  • npm包profitbricks-cli-modified-output使用教程

    介绍 profitbricks-cli-modified-output是一个npm包，它可以帮助我们更好地使用ProfitBricks云服务器提供商的命令行界面。该包可以自定义输出结果，并且添加了一些...

    3 年前
  • npm 包 webtask-hacks 使用教程

    在前端开发中，有时需要在服务端执行一些操作，如发送邮件、定时任务等，这时就需要借助一些工具或服务。其中，webtask-hacks 是一款很好用的 npm 包，可以简化服务端任务的处理，提高开发效率。

    3 年前
  • NPM 包 React-Sexy 的使用教程

    React-Sexy 是一个基于 React 的 UI 组件库，它提供了一些流行的 UI 组件，如按钮、表单、对话框等，同时也支持自定义样式和主题。 本文将介绍如何使用 React-Sexy。

    3 年前
  • npm 包 test478 使用教程

    在前端开发中，使用 npm 包可以方便地引入第三方库和工具，快速搭建项目。npm 包 test478 是一个常用的工具包，可以用于测试前端代码。本文将详细介绍 test478 的使用方法，包括安装、配...

    3 年前
  • npm 包 vue-own-redux 使用教程

    前言 当我们开发前端项目时，经常要用到状态管理工具。Redux 是一种流行的状态管理工具。然而，Redux 在 Vue 项目中的使用体验可能不是很好，尤其是当我们需要在多个组件之间共享数据时。

    3 年前
  • npm 包 @mmajewski/store-devtools 使用教程

    介绍 @mmajewski/store-devtools 是一个开源的 npm 包，提供了一个通用的 store 开发调试工具。它适用于任何实现了 Redux store 接口约定的状态管理库，并能够...

    3 年前
  • npm 包 hypher-for-jquery 使用教程

    在前端开发中，我们经常需要将长段落或标题进行分割，以实现自动换行或自动断行的效果。而如何更好地实现这一过程，成为了一个困扰前端开发人员很长时间的问题。幸运的是，诸如 npm 包 hypher-for-...

    3 年前
  • npm 包 hyper-transparent-dynamic-windows 使用教程

    hyper-transparent-dynamic-windows 是一个基于 Hyper.js 的 npm 包，用于创建透明度可动态设置的窗口效果。它是一种强大而简单的工具，可用于美化你的终端命令行...

    3 年前
  • npm 包 made-up-words 使用教程

    在前端开发中，我们经常需要生成随机的单词或名称来模拟数据或测试应用程序。这时候，npm 包 made-up-words 就可以派上用场了。在本文中，我们将介绍如何使用这个包。

    3 年前
  • npm 包 ember-material-components 使用教程

    介绍 ember-material-components 是一个基于 Google Material Design 设计标准的组件库，结合了 Ember.js 框架的特性，能够快速地开发出具有统一视觉...

    3 年前
  • npm包gpsd-fake使用教程

    前言 在前端开发中，如果需要模拟定位信息，可能会用到模拟 GPS 等定位信息的工具。其中gpsd-fake就是一个很好的选择。它是一个 GPS 伪装工具，可以将 GPS 的输出模拟成标准的 NMEA ...

    3 年前
  • npm 包 Ember Query Params Proxy 使用教程

    Ember Query Params Proxy 是一种方便的工具，它可以让你更轻松地对 URL 查询参数进行操作，以便于在你的 Ember 应用中管理复杂的查询参数。

    3 年前
  • npm 包 hapi-node-postgres-7 使用教程

    介绍 hapi-node-postgres-7 是一个基于 node.js、hapi 和 PostgreSQL 的 npm 包，主要用于访问和操作 PostgreSQL 数据库。

    3 年前
  • npm 包 qb-src 使用教程

    介绍 qb-src 是一个在 Node.js 和浏览器端都可以使用的 npm 包，其主要作用是对字符串进行加密和解密操作。qb-src 使用了简单易懂的加密算法，能够帮助前端程序员更加方便地保护敏感信...

    3 年前
  • npm 包 vue2-epoch 使用教程

    在当今的前端开发中，数据的可视化展示已经成为了一个不可或缺的部分。而我们如果要实现数据的可视化，最常用的就是通过图表来呈现数据。Vue2-epoch 就是一个可以帮助我们实现数据图表展示的 npm 包...

    3 年前

相关推荐

    暂无文章