随着前端技术的不断升级，前端应用逐渐变得更加复杂和功能强大。而在很多时候，我们需要使用本地存储来保存用户的一些信息，比如用户的登录状态、一些配置等。这时就需要用到 Local Storage 了。在本文中，我们将介绍如何在 React 应用中使用 Local Storage。
什么是 Local Storage
Local Storage 是 HTML5 中新出现的一种 Web 存储方案，它可以在用户的本地存储中保存键值对数据，以供 Web 应用使用。该数据存储方案不会过期，除非用户手动删除或清除浏览器缓存。
Local Storage 对于前端应用来说，可以方便地保存一些用户数据、历史记录、表单数据等等，从而提高用户体验和应用性能。
在 React 中使用 Local Storage
在 React 中使用 Local Storage 非常简单，只需要使用 localStorage API 即可。我们可以将 Local Storage 转换成一个 JavaScript 对象，然后把数据保存在其中。我们主要需要使用到如下两个方法：
localStorage.setItem(key, value)：在 Local Storage 中设置一个数据值。localStorage.getItem(key)：获取指定键的数据值。
下面是一个使用 Local Storage 的示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
------------ -- -
-- --- --- ----- ----- ---- ----- -------
----- ---------- - --------------------------------------- -- --
---------------------
-- ----
----- --------------- - -- -- -
----- -------- - ----- - --
-- ---- --- --- ----- -- ----- -------
----------------------------- ----------
-------------------
--
------ -
-----
--------- -----------
------- --------------------------------------------
------
--
-
------ ------- ----在上面的示例中，我们使用了 useState 和 useEffect，这是 React 中常用的两个 Hook。在 useEffect 中，我们通过 localStorage.getItem 方法获取之前保存的 count，然后将其传递给 setCount 以进行渲染。在 handleIncrement 函数中，我们通过 localStorage.setItem 将新的 count 值保存在 Local Storage 中。
上面的示例仅仅是一个简单的计数器组件，我们可以更进一步地将 Local Storage 封装成一个 React Hook：
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
-------- -------------------- ------------- -
----- ------- --------- - ----------- -- -
----- ---------- - --------------------------
-- ----------- --- ----- -
------ -----------------------
-
-- ------- ------------ --- ----------- -
------ ---------------
-
------ -------------
---
------------ -- -
------------------------- -----------------------
-- ----- --------
------ ------- ----------
-
------ ------- ----------------我们将上述代码保存在 useLocalStorage.js 文件中，并将其作为一个自定义 Hook 导入到其他 React 组件中。这样我们就可以更加方便地使用 Local Storage 了：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- --------------------
-------- ----- -
----- ------- --------- - ------------------------ ---
----- --------------- - -- -- -
-------------- - ---
--
------ -
-----
--------- -----------
------- --------------------------------------------
------
--
-
------ ------- ----总结
在本文中，我们介绍了如何在 React 应用中使用 Local Storage，包括设置和获取数据、使用 Hook 简化 Local Storage 的使用等。Local Storage 是一个非常有用的 Web 存储方案，可以方便地在用户本地存储中保存应用数据。我们可以在 React 应用中使用 Local Storage 来保存用户信息、配置等等，以提高应用性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64814f0748841e98940c4ebe