diff --git a/snippets/useLocalStorage.md b/snippets/useLocalStorage.md new file mode 100644 index 000000000..58aacc882 --- /dev/null +++ b/snippets/useLocalStorage.md @@ -0,0 +1,49 @@ +--- +title: useLocalStorage +tags: hooks,state,intermediate +firstSeen: 2021-09-13T05:00:00-04:00 +--- + +Creates a stateful value that is persisted to `localStorage`, 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 `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. +- Define a function that will update the state variable with the passed value and use `Storage.setItem()` to store it. + +```jsx +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]; +}; +``` + +```jsx +const MyApp = () => { + const [name, setName] = useLocalStorage('name', 'John'); + + return setName(e.target.value)} />; +}; + +ReactDOM.render(, document.getElementById('root')); +``` diff --git a/snippets/useSessionStorage.md b/snippets/useSessionStorage.md new file mode 100644 index 000000000..e76937694 --- /dev/null +++ b/snippets/useSessionStorage.md @@ -0,0 +1,49 @@ +--- +title: useSessionStorage +tags: hooks,state,intermediate +firstSeen: 2021-09-15T05:00:00-04:00 +--- + +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. + +```jsx +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]; +}; +``` + +```jsx +const MyApp = () => { + const [name, setName] = useSessionStorage('name', 'John'); + + return setName(e.target.value)} />; +}; + +ReactDOM.render(, document.getElementById('root')); +```