Coded Geekery

BlogWritingAboutContact
BlogWritingAboutContact

useLocalStorage

A React-friendly hook for localStorage

useLocalStorage.js
import React from "react" export const useLocalStorage = (key, initialValue) =>{ const [storedValue, setStoredValue] = React.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; } }); const setValue = (value) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); if (typeof window !== "undefined") { window.localStorage.setItem(key, JSON.stringify(valueToStore)); } } catch (error) { console.log(error); } }; return [storedValue, setValue]; }

Why?#

This hooks is used to sync state to local storage so that it persists through a page refresh.

Usage is similar to useState except we pass in a local storage key so that we can default to that value on page load instead of the specified initial value.

Since the local storage API isn't available in server-rendering environments, we check that typeof window !== "undefined" to make SSR and SSG work properly.

Usage#

  • Basic Usage

  • const Page = () => { const [name, setName] = useLocalStorage("name"); if(!name) { setName("John Doe"); } return ( <>{name}</> ) }

    Not Playing

    Spotify

    Coded Geekery

    TwitterGitHubInstagramgumroadbuymeacoffee

    Stuff

    HomeAbout MeContact Me

    © 2022 Roger Stringer. All rights reserved.