React useLocalStorage钩子
创建一个将状态值持久化到localStorage
的状态钩子,并提供一个更新状态值的函数。
- 使用
useState()
钩子和一个函数来惰性地初始化状态值。 - 使用
try...catch
块和Storage.getItem()
尝试从Window.localStorage
获取值。如果没有找到值,则使用Storage.setItem()
将defaultValue
存储起来并将其作为初始状态。如果发生错误,则将defaultValue
作为初始状态。 - 定义一个函数,该函数将使用传入的值更新状态变量,并使用
Storage.setItem()
将其存储起来。
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 />
);