在 Web 应用开发中，持久化状态是一个常见需求，特别是在需要在页面刷新或会话之间保持数据的场景。useLocalStorage 钩子提供了一种简洁的方式来将 React 状态与浏览器的 localStorage 结合，实现数据的持久化存储。这个自定义钩子不仅简化了 localStorage 的使用，还seamlessly集成到了 React 的状态管理模型中。以下是如何实现和使用这个自定义钩子：
const useLocalStorage = (keyName, defaultValue) => {
const [storedValue, setStoredValue] = React.useState(() => {
try {
const value = window.localStorage.getItem(keyName);
if (value) {
return JSON.parse(value);
} else {
window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
return defaultValue;
}
} catch (err) {
return defaultValue;
}
});
const setValue = newValue => {
try {
window.localStorage.setItem(keyName, JSON.stringify(newValue));
} catch (err) {}
setStoredValue(newValue);
};
return [storedValue, setValue];
};
const MyApp = () => {
const [name, setName] = useLocalStorage('name', 'John');
return <input value={name} onChange={e => setName(e.target.value)} />;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<MyApp />
);
这个技巧的关键点包括：
使用 useState的懒初始化来从 localStorage 读取初始值。如果 localStorage 中没有值，则使用默认值并将其存储。
