React+Redux 应用实战：本地存储的使用方法-JavaScript中文网-JavaScript教程资源分享门户

在 React+Redux 应用开发过程中，本地存储是一项非常重要的功能。它可以帮助我们保存用户的操作记录，以及应对一些异常情况，如网络断开等。在本文中，我们将深入探讨如何使用本地存储，来提高我们的应用效率和可用性。

什么是本地存储？

本地存储是指在用户的本地浏览器上，用于保存应用数据的一种技术。目前常见的本地存储技术有两种：Cookie 和 Web Storage。

Cookie

Cookie 是一种在客户端存储数据的小文件。它可以存储几乎任何类型的数据，如用户登录信息、购物车信息等等。Cookie 最常用的场景是用于保存用户的登录信息，以便下次浏览器打开时自动登录。

使用 document.cookie 可以轻松地读取和写入 Cookie。

// 写入 Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/";

// 读取 Cookie
var username = document.cookie;

Web Storage

Web Storage 是一种可以存储大量数据的技术，通过键值对的方式来存储信息。Web Storage 分为两种：LocalStorage 和 SessionStorage。它们的区别在于存储时间和作用域不同。

LocalStorage 中的数据会一直保留，直到用户清除浏览器缓存；而 SessionStorage 中的数据只在当前会话下有效，关闭浏览器窗口后将被删除。两者的作用域也不同：LocalStorage 在所有相同源的页面之间共享，而 SessionStorage 则是在同一个窗口或标签页中共享。

使用 Web Storage 也非常简单。可以使用 window.localStorage 或 window.sessionStorage 来读取和写入数据。

// javascriptcn.com 代码示例
// 写入 LocalStorage
localStorage.setItem("username", "John Doe");

// 读取 LocalStorage
var username = localStorage.getItem("username");

// 移除 LocalStorage
localStorage.removeItem("username");

// 清空所有 LocalStorage
localStorage.clear();

为什么需要本地存储？

在应用中，有一些操作可能需要用户登录后才能执行。如果用户每次打开应用都需要重新登录，那么将会非常繁琐。使用本地存储可以轻松地保存用户登录信息，使应用更加便利。

另外，有些操作可能需要用户先完成一些前置操作才能执行。我们可以使用本地存储保存用户的操作记录，以便用户下次打开应用时可以继续进行操作。

此外，网络断开等异常情况也是我们需要考虑的问题。如果应用在执行重要操作时突然断网，那么我们可以使用本地存储来保存用户的操作记录，以便网络恢复后能够继续执行操作。

如何使用本地存储？

在 React+Redux 应用中使用本地存储也非常简单。我们可以通过 Redux 中间件来实现本地存储的功能。

下面，我们以 LocalStorage 为例，介绍如何在 React+Redux 应用中使用本地存储。

安装依赖

首先，我们需要安装两个依赖项 redux-persist 和 redux-persist-transform-immutable。

npm install redux-persist redux-persist-transform-immutable --save

配置 Redux 中间件

我们需要使用 redux-persist 提供的 persistReducer 函数来创建新的 reducer，然后将其传递给新创建的 Store。

// javascriptcn.com 代码示例
import { createStore } from "redux";
import { persistReducer, persistStore } from "redux-persist";
import { composeWithDevTools } from "redux-devtools-extension";
import storage from "redux-persist/lib/storage";
import rootReducer from "./reducers";

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(
  persistedReducer,
  composeWithDevTools()
);

export const persistor = persistStore(store);

上述代码中，我们使用了 redux-persist 提供的 persistReducer 函数来创建新的 reducer，该函数接收一个配置对象和根 reducer 作为参数。配置对象中的 key 属性表示在 LocalStorage 中存储的 key 值，storage 属性则是要使用的存储引擎。

我们还需创建一个 persistor，用于在应用启动时将存储在 LocalStorage 中的数据加载到 Store 中。在特定的时刻，我们可以使用 persistor 来将 Store 中的数据保存到 LocalStorage 中。

配置 State 的白名单

我们还需要在配置对象中指定 State 的白名单。这样，我们就可以只将需要的 State 保存到 LocalStorage 中。

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["auth", "cart"],
};

在上述配置对象中，我们将 auth 和 cart 两个 State 保存到 LocalStorage 中。

恢复 State

在应用启动时，redux-persist 会自动从 LocalStorage 中恢复 State。我们无需手动编写代码来加载数据，只需要使用之前创建的 persistStore 函数即可。

// javascriptcn.com 代码示例
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./store";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById("root")
);

如上所示，在 Provider 组件中使用 PersistGate 组件，将 store 和 persistor 传递给 PersistGate。当我们启动应用时，PersistGate 会先加载本地存储的数据，并且提示用户等待程序初始化完成。

使用 State

最后，我们就可以在应用中使用 State 了。redux-persist 会自动将 State 存储到 LocalStorage 中，当我们需要加载 State 时，redux-persist 也会自动从 LocalStorage 中恢复数据。

// javascriptcn.com 代码示例
import React from "react";
import { connect } from "react-redux";
import { login } from "./store/actions/auth";

class Login extends React.Component {
  handleSubmit = (e) => {
    // 阻止表单默认提交行为
    e.preventDefault();

    // 发送登录请求
    let credentials = {
      email: this.emailRef.current.value,
      password: this.passwordRef.current.value,
    };
    this.props.login(credentials);

    // Todo: 跳转到其他页面
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="email" ref={this.emailRef} placeholder="Email" />
        <input type="password" ref={this.passwordRef} placeholder="Password" />
        <button type="submit">Login</button>
      </form>
    );
  }
}

const mapDispatchToProps = { login };

export default connect(null, mapDispatchToProps)(Login);

在上述代码中，我们通过派发 login action，来实现登录功能。login action 会更新 Store 中的 auth State。在 handleSubmit 方法中，我们通过读取表单中的数据，并将其传递给 login action，来发送登录请求。redux-persist 会在我们登录成功后自动将 State 保存在 LocalStorage 中，以便下次启动时可以自动加载这些数据。程度提高了我们应用的便捷性，是非常重要的一项功能。

总结

在本文中，我们介绍了 React+Redux 应用中本地存储的使用方法。通过安装 redux-persist 和 redux-persist-transform-immutable 两个依赖项，我们可以轻松地实现本地存储的功能。使用 persistReducer 函数创建新的 reducer，使用 persistStore 函数实现 Store 的白名单，即可将需要的 State 存储在 LocalStorage 中。同时，redux-persist 也会自动将数据从 LocalStorage 中恢复到 Store 中。这项功能可以使我们的应用更加便捷、高效和稳定，在应用中是一项非常重要的技术。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653e56a77d4982a6eb7dbe7b