在 Web 应用开发中，有时我们需要在单个会话内持久化状态，这意味着数据在页面刷新后保留，但在关闭浏览器后消失。useSessionStorage 钩子提供了一种简洁的方式来将 React 状态与浏览器的 sessionStorage 结合，实现会话级的数据持久化。这个自定义钩子不仅简化了 sessionStorage 的使用，还完美融入了 React 的状态管理模型。以下是如何实现和使用这个自定义钩子：
const useSessionStorage = (keyName, defaultValue) => {
const [storedValue, setStoredValue] = React.useState(() => {
try {
const value = window.sessionStorage.getItem(keyName);
if (value) {
return JSON.parse(value);
} else {
window.sessionStorage.setItem(keyName, JSON.stringify(defaultValue));
return defaultValue;
}
} catch (err) {
return defaultValue;
}
});
const setValue = newValue => {
try {
window.sessionStorage.setItem(keyName, JSON.stringify(newValue));
} catch (err) {}
setStoredValue(newValue);
};
return [storedValue, setValue];
};
const MyApp = () => {
const [name, setName] = useSessionStorage('name', 'John');
return <input value={name} onChange={e => setName(e.target.value)} />;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<MyApp />
);
这个技巧的关键点包括：
使用 useState的懒初始化来从 sessionStorage 读取初始值。如果 sessionStorage 中没有值，则使用默认值并将其存储。 提供一个 setValue函数，同时更新 React 状态和 sessionStorage。
