localStorage
, and a function to update it.useState()
hook with a function to initialize its value lazily.try...catch
block and Storage.getItem()
to try and get the value from localStorage
. If no value is found, use Storage.setItem()
to store the defaultValue
and use it as the initial state. If an error occurs, use defaultValue
as the initial state.Storage.setItem()
to store it.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.render(<MyApp />, document.getElementById('root'));
Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️