让React状态刷新不丢失：react-custom-hooks的useStorage（localStorage/sessionStorage）完整指南-开发者社区

让React状态刷新不丢失：react-custom-hooks的useStorage（localStorage/sessionStorage）完整指南

【免费下载链接】react-custom-hooksReact Custom Hooks @ S.Leschev: useArray useAsync useClickOutside useCookie useCopyToClipboard useDarkMode useDebounce useDebugInformation useDeepCompareEffect useEffectOnce useEventListener useFetch useGeolocation useHover useLongPress useMediaQuery useOnlineStatus useOnScreen usePrevious useRenderCount useScript etc.项目地址: https://gitcode.com/gh_mirrors/re/react-custom-hooks

还在为 React 应用刷新页面后状态全部清零而烦恼吗？开源项目react-custom-hooks中的useStorage自定义钩子，正是解决这个问题的利器。它基于浏览器原生的localStorage和sessionStorage，让你用类似useState的写法，把 React 状态轻松持久化到本地存储中——刷新不丢、关闭浏览器也不丢。本文是面向初学者的完整指南，带你从零上手这个强大的 React 状态持久化方案。

🤔 为什么 React 状态会在刷新后丢失？

React 的useState把数据保存在组件的内存里。这意味着：

用户一按F5 刷新，状态立刻回到初始值；
用户关闭再打开浏览器，填了一半的表单、选好的主题设置全部消失。

手动对接localStorage也很繁琐：读数据、JSON.parse、写数据、JSON.stringify，还得处理各种边界情况。useStorage把这些全部封装好了，你只需要专注业务逻辑。

⚡ 认识 useStorage：一个文件，两个钩子

useStorage的源码非常小巧，位于：

src/hooks/useStorage/useStorage.js

它对外提供两个钩子，用法几乎一致：

钩子	对应存储	数据生命周期
`useLocalStorage`	localStorage	长期保存，关闭浏览器后依然存在
`useSessionStorage`	sessionStorage	会话级保存，关闭标签页即清空

调用后返回一个三元组：

当前值value—— 可直接渲染到界面上；
设置函数setValue—— 像useState的 setter 一样更新状态，同时自动写入存储；
移除函数remove—— 一键清除存储中的这条数据，让组件回到默认值。

所有数据都会自动做JSON 序列化/反序列化，所以字符串、数字、对象、数组都能直接存取，不需要你操心格式转换。

🚀 3 步上手：让状态刷新后依然健在

第一步：获取项目代码

如果还没有本地代码，执行下面命令克隆仓库即可：

git clone https://gitcode.com/gh_mirrors/re/react-custom-hooks

第二步：在你的组件里调用钩子

项目自带的示例组件src/hooks/useStorage/StorageComponent.js展示了最典型的用法，核心只有两行：

const [name, setName, removeName] = useSessionStorage("name", "Sergey") const [age, setAge, removeAge] = useLocalStorage("age", 26)

第一个参数是存储的 key（相当于给数据起的名字），第二个是默认值——当存储里没有这条数据（比如第一次访问）时使用。默认值甚至支持传函数做惰性初始化。

第三步：刷新页面验证效果

界面上点击 "Set Name" 把名字改成 John，再按 F5 刷新——你会发现：

存在localStorage里的age原样保留；
存在sessionStorage里的name只要标签页没关就还在。

状态不再"刷新即失忆"，这就是useStorage的价值。

🧭 该选 localStorage 还是 sessionStorage？

简单记一个原则：看数据的"保质期"。

选useLocalStorage（长期记忆）：用户主题偏好、语言设置、购物车草稿、登录信息……这些希望"下次再来也还在"的数据。
选useSessionStorage（短期记忆）：多步表单的中间进度、搜索历史、"本次会话记住即可"的临时状态。关标签页自动清空，天然不留垃圾数据。

项目中的暗色模式钩子就是教科书级的实战案例：src/hooks/useDarkMode/useDarkMode.js用useLocalStorage持久化用户的深色/浅色选择，配合useMediaQuery读取系统偏好，用户切换一次主题，以后每次打开网站都自动生效。

🔍 它是怎么做到"自动同步"的？

理解原理能让你用得更放心，useStorage内部只用了三个 React 内置能力：

惰性初始化：组件首次渲染时从存储里读数据，没有就用默认值；
useEffect 自动写入：只要值变化，就自动setItem序列化后写回存储；值被设为undefined时会自动删除对应 key；
useCallback 提供稳定的 remove：点击"移除"按钮即可清空这条数据。

整个过程无需你手写任何getItem/setItem代码，也不会因为忘记同步导致"界面显示的和存储里的不一致"。

💡 三个高频实战场景

场景	推荐写法
设置面板持久化	`useLocalStorage("settings", {...})`存对象
退出登录清空数据	调用`remove`函数一键清除用户数据
表单草稿自动保存	每次输入更新`setValue`，用户误关页面也不丢