Skip to content

Instantly share code, notes, and snippets.

@gragland
Last active December 9, 2022 21:57
Show Gist options
  • Save gragland/2970ae543df237a07be1dbbf810f23fe to your computer and use it in GitHub Desktop.
Save gragland/2970ae543df237a07be1dbbf810f23fe to your computer and use it in GitHub Desktop.
import { useState } from 'react';
// Usage
function App() {
// Similar to useState but first arg is key to the value in local storage.
const [name, setName] = useLocalStorage('name', 'Bob');
return (
<div>
<input
type="text"
placeholder="Enter your name"
value={name}
onChange={e => setName(e.target.value)}
/>
</div>
);
}
// Hook
function useLocalStorage(key, initialValue) {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
try {
// Get from local storage by key
const item = window.localStorage.getItem(key);
// Parse stored json or if none return initialValue
return item ? JSON.parse(item) : initialValue;
} catch (error) {
// If error also return initialValue
console.log(error);
return initialValue;
}
});
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to localStorage.
const setValue = value => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore =
value instanceof Function ? value(storedValue) : value;
// Save state
setStoredValue(valueToStore);
// Save to local storage
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
// A more advanced implementation would handle the error case
console.log(error);
}
};
return [storedValue, setValue];
}
@AngelAlexQC
Copy link

You can sync the state of localStorage between all tabs that application is opened.
My solution was:

import { useEffect, useState } from "react";

const useLocalStorage = (key, initialValue) => {
    // State to store our value
    // Pass initial state function to useState so logic is only executed once
    const [storedValue, setStoredValue] = useState(() => {
        if (typeof window === "undefined") {
            return initialValue;
        }
        try {
            // Get from local storage by key
            const item = window.localStorage.getItem(key);
            // Parse stored json or if none return initialValue
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            // If error also return initialValue
            console.log(error);
            return initialValue;
        }
    });
    // Return a wrapped version of useState's setter function that ...
    // ... persists the new value to localStorage.
    const setValue = (value) => {
        try {
            // Allow value to be a function so we have same API as useState
            const valueToStore =
                value instanceof Function ? value(storedValue) : value;
            // Save state
            setStoredValue(valueToStore);
            // Save to local storage
            if (typeof window !== "undefined") {
                window.localStorage.setItem(key, JSON.stringify(valueToStore));
            }
        } catch (error) {
            // A more advanced implementation would handle the error case
            console.log(error);
        }
    };

    // Sync localStorage between tabs
    useEffect(() => {
        const listener = (e) => {
            if (e.key === key) {
                setStoredValue(JSON.parse(e.newValue));
            }
        };
        window.addEventListener("storage", listener);
        return () => {
            window.removeEventListener("storage", listener);
        };
    }
        , [
            key,
            initialValue,
        ]);

    return [storedValue, setValue];
};

export default useLocalStorage;

@ris58h
Copy link

ris58h commented Sep 13, 2022

Could we add a custom serialization/deserialization logic?
function useLocalStorage(key, initialValue, serialize = JSON.stringify, deserialize = JSON.parse) {
And use those functions instead of calling JSON.stringify/JSON.parse.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment