介绍
在开发轻量级应用程序时——我们可能想要存储一些数据。 如果数据库是矫枉过正 - 有一个很好的选择： localStorage!
虽然它不会为了数据库的目的而取代数据库，但它确实可以作为一个简单的基于文件的存储系统，您可以利用它来存储易于访问的数据点。
在本文中，我们将学习如何使用
localStorage轻松地将数据存储在我们的浏览器中。 此数据另存为 键值对 用户可以轻松检索。
将数据保存到 localStorage 在 React 中非常简单：
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
如果您不着急并想了解更多有关其工作原理的信息，请继续阅读！
什么是 本地存储?
localStorage 是一个 Web 存储对象，使开发人员能够存储 键值对 在网络浏览器中，并确保这些数据在所有页面刷新后仍然存在，即使用户关闭或重新启动浏览器 - 而且它没有到期日期。 存储的键值对可以包括任何类型的数据——数组、对象、字符串、数字等等。
但是，这并不能取代数据库在您的网站和 Web 应用程序中的作用，因为当用户清除浏览器的缓存和本地存储时，数据会丢失——最终，它是 本地存储 并且应该这样使用。 尽管如此，在某些情况下用户可以使用 localStorage，例如实施 黑暗模式 功能，持久化用户的表单输入值，等等。
localStorage 具有允许我们访问浏览器存储对象的内置方法。 一个例子是 setItem() 方法，它允许我们添加一个键和一个值到 localStorage，因此使我们能够存储数据。 其他方法用于检索数据 - getItem(), 删除数据 – removeItem(), 全部清除 localStorage 实例—— clear()，等等。
将数据存储到 本地存储 随着 设置项（） 付款方式
setItem() 方法允许我们将任何数据类型的值保存到 localStorage 通过给键赋值，得到一个 键值对. 每当我们想从中检索它时，该键将用于检索相应的值 localStorage.
请注意： 为了将数据存储在 localStorage，我们必须先将其转换为 JSON字符串 使用 JSON.stringify() 功能。 当我们想要检索它时，我们将使用解析数据 JSON.parse(), 将 JSON 字符串转换回 JSON 对象.
在 React 中处理数据时，我们经常使用 挂钩 帮助我们存储/持有它。 Hooks 还可以帮助我们找到上传数据的位置。 这也适用于 localStorage 因为我们将使用 useState() 和 useEffect() 钩子。 这些钩子很关键，因为 useState() hook 用于保存和设置数据，而 useEffect() 默认情况下，在第一次渲染之后以及作为第二个参数传递的状态发生更改时触发钩子。
在解释了基础之后，这是我们用来存储数据的代码 localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
我们首先创建了一个状态来保存我们想要存储的数据 localStorage，然后我们创建了一个 useEffect() 钩子，将状态作为第二个参数传递。 这样，每当状态发生变化时， localStorage 更新为当前值。
我们处理了核心功能，用于帮助我们进行数据存储，在 useEffect() 钩：
localStorage.setItem('dataKey', JSON.stringify(data));
结论
在本文中，我们学习了如何使用 React 钩子在 React 中存储数据 localStorage. 如前所述，这永远不会取代数据库的角色，而是会帮助我们存储一些与用户相关的数据，这些数据可以改进 UI，但并不意味着独立于浏览器进行持久化。
