File size: 1,277 Bytes
9705b6c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/* `useLocalStorage`
*
* Features:
* - JSON Serializing
* - Also value will be updated everywhere, when value updated (via `storage` event)
*/
import { useEffect, useState } from 'react';
export default function useLocalStorage<T>(key: string, defaultValue: T): [T, (value: T) => void] {
const [value, setValue] = useState(defaultValue);
useEffect(() => {
const item = localStorage.getItem(key);
if (!item) {
localStorage.setItem(key, JSON.stringify(defaultValue));
}
setValue(item ? JSON.parse(item) : defaultValue);
function handler(e: StorageEvent) {
if (e.key !== key) {
return;
}
const lsi = localStorage.getItem(key);
setValue(JSON.parse(lsi ?? ''));
}
window.addEventListener('storage', handler);
return () => {
window.removeEventListener('storage', handler);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const setValueWrap = (value: T) => {
try {
setValue(value);
localStorage.setItem(key, JSON.stringify(value));
if (typeof window !== 'undefined') {
window.dispatchEvent(new StorageEvent('storage', { key }));
}
} catch (e) {
console.error(e);
}
};
return [value, setValueWrap];
}
|