react localstorage

1// setter
2localStorage.setItem('myData', data);
3// getter
4localStorage.getItem('myData');
5// remove
6localStorage.removeItem('myData');
7// remove all
8localStorage.clear();

1const useLocalStorage = (keyName, defaultValue) => {
2  const [storedValue, setStoredValue] = React.useState(() => {
3    try {
4      const value = window.localStorage.getItem(keyName);
5
6      if (value) {
7        return JSON.parse(value);
8      } else {
9        window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
10        return defaultValue;
11      }
12    } catch (err) {
13      return defaultValue;
14    }
15  });
16
17  const setValue = newValue => {
18    try {
19      window.localStorage.setItem(keyName, JSON.stringify(newValue));
20    } catch (err) {}
21    setStoredValue(newValue);
22  };
23
24  return [storedValue, setValue];
25};
26
27Example
28const MyApp = () => {
29  const [name, setName] = useLocalStorage('name', 'John');
30
31  return <input value={name} onChange={e => setName(e.target.value)} />;
32};
33
34ReactDOM.render(<MyApp />, document.getElementById('root'));