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

让React状态刷新不丢失react-custom-hooks的useStoragelocalStorage/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它对外提供两个钩子用法几乎一致钩子对应存储数据生命周期useLocalStoragelocalStorage长期保存关闭浏览器后依然存在useSessionStoragesessionStorage会话级保存关闭标签页即清空调用后返回一个三元组当前值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时会自动删除对应 keyuseCallback 提供稳定的 remove点击移除按钮即可清空这条数据。整个过程无需你手写任何getItem/setItem代码也不会因为忘记同步导致界面显示的和存储里的不一致。 三个高频实战场景场景推荐写法设置面板持久化useLocalStorage(settings, {...})存对象退出登录清空数据调用remove函数一键清除用户数据表单草稿自动保存每次输入更新setValue用户误关页面也不丢❓ 新手常见问题Q默认值什么时候生效只有存储里不存在该 key或已被remove删除时才会用默认值之后都以存储为准。Q存复杂对象会出错吗不会钩子内部统一走JSON.stringify/JSON.parse对象和数组都能直接存。Qkey 可以重复吗不同组件可以用同一个 key 共享同一条数据也可以为不同状态用不同 key 互相隔离灵活度完全在你。✅ 小结react-custom-hooks的useStorage用不足 40 行代码见 useStorage.js解决了 React 状态持久化中最常见的痛点✅ 两行代码打通 React 状态与 localStorage / sessionStorage✅ 自动 JSON 序列化对象数组随便存✅ 内置remove清理数据只需一次调用。把它加入你的 React 工具箱从此告别刷新丢状态的尴尬体验。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考