useLocalStorage Hook 实现状态与 localStorage 自动同步：初始化读取、更新时写入、监听 storage 事件跨 Tab 同步，支持多类型数据，使用方式类似 useState。
在 React 应用中，让组件状态（useState）与浏览器存储（如 localStorage）自动同步，不需要每次手动 setItem 和 getItem。一个轻量、可复用的自定义 Hook 就能解决这个问题。
核心思路：封装读写逻辑 + 监听存储变化
自定义 Hook 的关键在于三点：
- 初始化时从
localStorage读取值，若不存在则用默认值 - 状态更新时自动写入
localStorage - 监听同源下其他 Tab 或窗口触发的
storage事件，实现跨 Tab 同步
基础版 useLocalStorage Hook
以下是一个稳定可用的实现（支持字符串、数字、布尔、对象等类型）：
import { useState, useEffect } from 'react';
function useLocalStorage(key, initialValue) {
// 初始化读取
const getStoredValue = () => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (e) {
return initialValue;
}
};
const [storedValue, setStoredValue] = useState(getStoredValue);
// 写入 localStorage
const setValue = (value) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (e) {
console.warn(`Failed to set localStorage for ${key}`, e);
}
};
// 监听其他 Tab 的 storage 变化
useEffect(() => {
const handleStorageChange = (e) => {
if (e.key === key) {
try {
setStoredValue(e.newValue ? JSON.parse(e.newValue) : initialValue);
} catch {
setStoredValue(initialValue);
}
}
};
window.addEventListener('storage', handleStorageChange);
return () => window.removeEventListener('storage', handleStorageChange);
}, [key, initialValue]);
return [storedValue, setValue];
}
使用示例：计数器自动持久化
在组件中像使用 useState 一样调用即可：
立即学习“前端免费学习笔记（深入）”；
function Counter() {
const [count, setCount] = useLocalStorage('counter', 0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
刷新页面或打开新 Tab，计数值依然保留；任意 Tab 修改后，其他 Tab 会实时响应。
增强建议（按需添加）
-
支持 sessionStorage：把
window.localStorage替换为window.sessionStorage，并抽离为参数 -
防抖写入：高频更新场景（如输入框）可加
useEffect+setTimeout避免频繁 IO -
类型安全（TypeScript）：为
initialValue添加泛型约束，提升 IDE 提示和编译检查 -
删除键值：可扩展返回第三个函数，例如
remove，内部调用localStorage.removeItem(key)
