use state with persistent storage

useStateLocalStorage.js

import { useState, useEffect } from 'react';

export const useStateLocalStorage = (localStorageKey, initialState = "") => {
  const init = localStorage.getItem(localStorageKey) || initialState;
  const [value, setValue] = useState(init);
  
  useEffect(() => {
    localStorage.setItem(localStorageKey, value);
  }, [value]);
  
  return [value, setValue];
};

useStateSessionStorage.js

import { useState, useEffect } from 'react';

export const useStateSessionStorage = (localStorageKey, initialState = "") => {
  const init = sessionStorage.getItem(localStorageKey) || initialState;
  const [value, setValue] = useState(init);
  
  useEffect(() => {
    sessionStorage.setItem(localStorageKey, value);
  }, [value]);
  
  return [value, setValue];
};