I have created and open-sourced a useLocalStorage hook I use under the npm module name, uselocalstorage. This article will go into how to install and use the hook.

The Repo

Please help me grow this hook by starring the repo here: uselocalstorage Github Repo. Additionally, I would appreciate any contributions/enhancements you might have!

Installating uselocalstorage

You can install the package with npm:

npm i use-local-storage

Or with yarn:

yarn add use-local-storage

Basic Usage

In its most basic form, the useLocalStorage hook just needs the Local Storage key you wish to use. However, it’s advised that you also provde a default value as a second argument in the event that they key does not yet exist in Local Storage.

The following usage will persist the username variable in a "name" key in Local Storage. It will have a default/initial value of an empty string "". This default value witll only be used if there is no value already in Local Storage.

import useLocalStorage from 'use-local-storage';

function MyComponent() {
  const [username, setUsername] = useLocalStorage('name', '');

  return (
    <>
      <input
        value={username}
        onChange={(e) => {
          setUsername(e.target.value);
        }}
      />
    </>
  );
}

Note: By default, the useLocalStorage hook uses JSON.stringify and JSON.parse to serialize and parse the data, respectively. A custom serializer and/or parser can be configured if desired (discussed below in the Advanced Usage section).

Typescript Use

The type of username will be inferred from your default value. In this case, the type of string will be inferred.

If you use useLocalStorage without providing a default value, or you simply want to specify that username is actually of a different type, you should pass the type of your data as a generic:

import useLocalStorage from 'use-local-storage';

function MyComponent() {
  const [username, setUsername] = useLocalStorage<string>('name');

  return (
    <>
      <input
        value={username}
        onChange={(e) => {
          setUsername(e.target.value);
        }}
      />
    </>
  );
}

Advanced Usage / Options

the useLocalStorage hook takes an optional third options argument. This allows you to configure a custom serializer and/or parser if you need to use something other than JSON.stringify and JSON.parse. The options object also has a logger key to log an errors caught in the hook.

const options = {
  serializer: (obj) => {
    /* Serialize logic */
    return someString;
  },
  parser: (str) => {
    /* Parse logic */
    return parsedObject;
  },
  logger: (error) => {
    // Do some logging
  },
};

const [data, setData] = useLocalStorage('data', { foo: 'bar' }, options);

Attribution

🎓 Learn how the web works

One of the best ways to level up your tech career is to have a great foundational understanding of how the web works. In my free newsletter, How the Web Works, I provide simple, bite-sized explanations for various web topics that can help you boost your knowledge. Join 2,500+ other learners on the newsletter today!

Signing up is free, I never spam, and you can unsubscribe any time. You won't regret it!