在 React 中使用 localStorage 持久化状态

1. React 中的 localStorage 是什么
2. 在 React 中使用 localStorage 方法
3. React 中 localStorage 的实际示例

单页应用程序今天非常流行，主要是因为它们的速度和卓越的用户体验。存在许多用于构建 SPA 的库和框架，但 React 是最流行的；它利用 Virtual DOM 使用页面的最新和最新版本更新屏幕。

在 React 中，状态是一个重要的概念，因为状态或 props 的变化会触发特定组件的重新渲染。有很多方法可以维护状态并更新其值。

一种方法是使用一个简单的状态对象来维护这些值。一个更高级的选项是将状态持久化到 localStorage。

React 开发人员使用诸如 redux 之类的库来管理复杂项目的状态。在本文中，我们想探索 localStorage 方法。

React 中的 localStorage 是什么

简而言之，localStorage 是浏览器的一项功能，用于存储或持久化数据以供以后使用。例如，如果你在 React 应用程序中维护一个常规的 state 对象，则在关闭选项卡或整个浏览器后就不可能维护 state 值。

即使你关闭浏览器，localStorage 也会保留数据，因此非常适合在你构建应用程序或想要在 React 中构建本地 JavaScript 应用程序时保留数据。例如，如果你有一个待办事项应用程序，你不希望在关闭应用程序时丢失有关待办事项的所有数据。

你可以使用 localStorage 确保即使你关闭浏览器也不会丢失数据。

你可以将 localStorage 与类组件和功能组件一起使用。更新类组件状态的主要方法是 setState() 方法。

我们在功能组件中有 useState() 钩子，创建一个状态变量和一个更新函数。

在 React 中使用 localStorage 方法

通常 React 开发人员使用 localStorage 来存储他们想要在应用程序中持久保存的键值数据。有一个特定的 API 用于维护 localStorage 中的值。

localStorage 最常见的操作之一是使用 localStorage.setItem() 方法创建具有键值对的记录。它接受两个字符串作为参数：代表键值和一个代表值本身。

例如，localStorage.setItem('Name', 'George') 将创建一个具有 Name: George 键值对的数据记录。localStorage.getItem() 方法接受一个字符串参数来表示键，它允许我们读取该键的值。

例如，我们可以像这样读取 Name 键的值：localStorage.getItem('Name')。

你还可以使用 localStorage.removeItem() 方法删除特定的键值对。它接受一个参数，字符串值，以表示必须删除的 key 值。

例如，localStorage.removeItem('Name') 将删除我们最近添加的键值对。最后，localStorage.clear() 方法不需要任何参数，并且会自动清除 localStorage 中的每个键值对。

React 中 localStorage 的实际示例

让我们探索一下 React 中 localStorage 的实际好处，并构建一个简单的应用程序来响应用户的操作并相应地更改元素的样式。

但是，你必须考虑到 localStorage 不是 React 的内置功能。如果你在 React 中更新常规状态值，组件将自动重新渲染。

但是，更改 localStorage 对象键的值不会自动更新组件。相反，我们可以使用 API 上的 getItem() 方法从 localStorage 读取值。

如果你查看 CodeSandbox 上的演示，你会发现更改 localStorage 后不会立即可见。为确保你的应用立即响应用户的输入，你需要更新本地状态值。

在这种情况下，我们有一个功能组件，因此我们使用 useState 挂钩来创建状态变量和更新它的函数。然后我们定义一个事件处理程序，它同时更新 localStorage 中的值和本地状态变量。

import { useState } from "react";
export default function App() {
  const [bgColor, setBgColor] = useState("");
  const handleClick = (color) => {
    localStorage.setItem("color", color);
    setBgColor(color);
  };
  return (
    <div
      style={{ backgroundColor: localStorage.getItem("color"), height: 500 }}
    >
      <button onClick={() => handleClick("pink")}>Pink</button>
      <button onClick={() => handleClick("blue")}>Blue</button>
      <button onClick={() => handleClick("purple")}>Purple</button>
    </div>
  );
}

即使我们从未直接读取状态值，我们仍然需要对其进行更新，以确保使用 localStorage 中的最新值重新渲染组件。