Function useLocalStorage

  • Provides a wrapper around the localStorage API. Additionally, allows you to listen to changes between different instances of this hook. Other than that, it behaves mostly like a regular useState hook.

    Parameters

    • key: string

      This is the name of the value to store. Multiple instances with different keys don't affect each other.

    • options: LocalStorageOptions = {}

      Provides additional ways to configure the hook.

    Returns [string | null, Dispatch<SetStateAction<string | null>>]

    An array similar to useState containing the current value behind the localStorage key and a setter method. Calling setState(null) removes the item from localStorage.

    function Page() {
    const [value, setValue] = useLocalStorage("value");
    return <input type="text" value={value ?? ""} onChange={(e) => setValue(e.target.value)} />;
    }