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'));
+```