useSessionStorage Hook

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

Berkay Askin
Berkay Askin
1 min read

  • 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 Window.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];
};

Example usage:

const MyApp = () => {
  const [name, setName] = useSessionStorage('name', 'John');

  return <input value={name} onChange={e => setName(e.target.value)} />;
};

Related Snippets

useDebounce Hook

logo
React Hook

Debounces the given value.

useForm Hook

logo
React Hook

Creates a stateful value from the fields in a form.