DEV Community

Discussion on: The Basics of Local Storage in React JS!

Collapse
lukeshiru profile image
Info Comment hidden by post author - thread only visible in this permalink
Luke Shiru

I recommend having 2 utils to get and save data in localStorage as JSON, so you can save objects, arrays, numbers, strings and so on:

const setLocalStorage = key => value =>
    localStorage.setItem(key, JSON.stringify(value));
const getLocalStorage = key => JSON.parse(localStorage.getItem(key));
Enter fullscreen mode Exit fullscreen mode

Once you got those, you can create a hook based on that, to integrate it better with React:

const useLocalStorage = (key, initialValue) => {
    // We use `useState` with the current value of localStorage
    // or a given initial value
    const [value, setValue] = useState(getLocalStorage(key) ?? initialValue);

    useEffect(() => {
        // Every time the value changes (or the key) we need to update localStorage
        setLocalStorage(key)(value);

        // This is a listener we will use to keep the internal state in sync
        // with localStorage, so if it changes in another tab, this tab will
        // be updated as well
        const storageSync = () => {
            const localStorageValue = getLocalStorage(key);

            return localStorageValue !== value
                ? setValue(localStorageValue)
                : undefined;
        };

        // We add the listener
        window.addEventListener("storage", storageSync);

        // And we remove it when we unmount
        return () => window.removeEventListener("storage", storageSync);
    }, [key, value]);

    // Finally we return the useState tuple, so we can use it as a useState
    return [value, setValue];
};
Enter fullscreen mode Exit fullscreen mode

And then you use it like this:

const Counter = () => {
    const [count, setCount] = useLocalStorage("count", 0);

    return <button onClick={() => setCount(count + 1)}>{count}</button>;
};
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
salehmubashar profile image
Saleh Mubashar Author

Yes you can, in fact this is a good approach, however in this tutorial I am only focusing on the basics of how to get and set data not to integrate it woth other react features like hooks.
Thanks!

Collapse
lukeshiru profile image
Luke Shiru

Then why title it "Local Storage in React" if you'll not integrate it with React? You could just show localStorage without React then. I mean I get that you get more views with the #react tag, but is like I wrote an article called "Adding numbers in React" and did this:

const OnePlusOne => () => <>{1 + 1}</>
Enter fullscreen mode Exit fullscreen mode

Instead of just doing 1 + 1 😵

Thread Thread
salehmubashar profile image
Saleh Mubashar Author • Edited on

You missed my point. I could have mentioned using localstorage with hooks in details, however most of my tutorials are targeted to the beginner or intermediate audience. Besides, i mentioned several times in my post that you can use the items from local storage in any way possible, however.my focus was localstorage itself and how to get started with it.
Thanks

Thread Thread
salehmubashar profile image
Saleh Mubashar Author

Furthermore, i mentioned about JSON.stringify and how multiple objects can be saved, however i tried to keep it as simple as possible

Some comments have been hidden by the post's author - find out more