實現(xiàn)一個自定義 React Hook：UseLocalStorageState
作者：前端西瓜哥
最近做需求，需要將數據保存到 localStorage 里，在組件初始化的時候獲取，然后修改該值的時候，要保存到本地的 localStorage 中。
大家好，我是前端西瓜哥。
最近做需求，需要將數據保存到 localStorage 里，在組件初始化的時候獲取，然后修改該值的時候，要保存到本地的 localStorage 中。
倒是并不難。
function App() {
const STORAGE_NAME = 'app_theme';
const defaultVal = '前端西瓜哥'
const [value, setValue] = useState(() => {
const storage = localStorage.getItem(STORAGE_NAME);
return storage || defaultVal;
})
const changeValue = (val) => {
localStorage.setItem(STORAGE_NAME, val);
setValue(val);
}
return (
<div>
<input value={value} onChange={e => changeValue(e.target.value)}/>
</div>
);
}
很顯然，這些邏輯完全可以封裝為一個 React Hook，名字很容易想到為 useLocalStorageState。
const useLocalStorageState = (key, defaultValue) => {
const data = localStorage.getItem(key);
const [value, setValue] = useState(data || defaultValue);
return [
value,
(val) => {
localStorage.setItem(key, val);
setValue(val);
}
];
};
邏輯并不復雜。就是在讀和寫的時候，加上 localStorage 的讀寫邏輯就好了。
用法如下：
function App() {
const STORAGE_NAME = "app_theme";
const defaultVal = "前端西瓜哥";
const [value, setValue] = useLocalStorageState(STORAGE_NAME, defaultVal);
return (
<div>
<input value={value} onChange={e => setValue(e.target.value)} />
</div>
);
}
其實這個實現(xiàn)還是比較粗糙的，只支持字符串格式，如果你要保存對象，需要自己手動 JSON.parse 和 JSON.stringify 來擴展了數據類型的范圍。
我們可以加一下序列化和反序列化支持：
const useLocalStorageState = (key, defaultValue) => {
const data = localStorage.getItem(key);
const [value, setValue] = useState(JSON.parse(data || defaultValue));
return [
value,
(val) => {
localStorage.setItem(key, JSON.stringify(val));
setValue(val);
}
];
};
// 使用
function App() {
const STORAGE_NAME = "app_theme";
const defaultVal = { name: "前端西瓜哥" };
const [value, setValue] = useLocalStorageState(STORAGE_NAME, defaultVal);
return (
<div>
<input
value={value.name}
onChange={(e) => setValue({ name: e.target.value })}
/>
</div>
);
}
另外，JSON 序列化和反序列方法如果不夠用，我們可以再加個自定義序列反序列化方法：
const useLocalStorageState = (key, defaultValue, serializer, deserializer) => {
defaultValue = localStorage.getItem(key) || defaultValue;
const [value, setValue] = useState(
deserializer ? deserializer(defaultValue) : JSON.parse(defaultValue)
);
return [
value,
(val) => {
localStorage.setItem(
key,
serializer ? serializer(val) : JSON.stringify(val)
);
setValue(val);
}
];
};
其實優(yōu)秀的第三方 React Hook 庫 ahooks 也有這個實現(xiàn)，我還是建議大家用一些比較成熟的輪子，我這里只是提供一下思路。
ahooks 的 useLocalStorageState 的源碼：
https://github.com/alibaba/hooks/blob/v3.4.0/packages/hooks/src/useLocalStorageState/index.ts。
責任編輯：姜華
來源：
今日頭條
