Menu

gitpiper

useSessionStorage react Code Snippet in 2024

hooksstateintermediate

Last Updated: 16 March 2024

Creates a stateful value that is persisted to sessionStorage, and a function to update it.

  • Use the useState() hook with a function to initialize its value lazily.
  • Use a try...catch block and Storage.getItem() to try and get the value from sessionStorage. 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.
  • Define a function that will update the state variable with the passed value and use Storage.setItem() to store it.
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.render(<MyApp />, document.getElementById('root'));

react snippet similar to useSessionStorage For You in March 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️