我创建并开源了一个使用本地存储（useLocalStorage）的钩子，我使用的是npm模块名称：uselocalstorage。这篇文章将介绍如何安装和使用这个钩子。

Repo

请帮助我发展这个钩子，请在这里加入Repo：uselocalstorage Github Repo。此外，我将感谢你的任何贡献/改进!

安装uselocalstorage

你可以用npm安装这个包。

npm i use-local-storage

或者用yarn。

yarn add use-local-storage

基本用法

在其最基本的形式下，useLocalStorage 钩子只需要你想使用的本地存储key 。然而，建议你也提供一个默认值作为第二个参数，以备他们key ，而本地存储中还不存在。

下面的用法将把username 变量保存在本地存储的一个"name" 键中。它将有一个默认/初始值，即空字符串"" 。这个默认值只有在本地存储中没有值的情况下才会被使用。

import useLocalStorage from 'use-local-storage';

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

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

**注意：**默认情况下，useLocalStorage 钩子使用JSON.stringify 和JSON.parse 分别对数据进行序列化和解析。如果需要，可以配置一个自定义的序列化器和/或解析器（在下面的高级用法部分讨论）。

类型脚本的使用

username 的类型将从你的默认值中推断出来。在这种情况下，string 的类型将被推断出来。

如果你使用useLocalStorage 而不提供默认值，或者你只是想指定username 实际上是一个不同的类型，你应该把你的数据类型作为一个泛型传递。

import useLocalStorage from 'use-local-storage';

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

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

高级用法/选项

useLocalStorage 钩子需要一个可选的第三个参数options 。如果你需要使用JSON.stringify 和JSON.parse 以外的东西，这允许你配置一个自定义的串行器和/或分析器。options 对象也有一个logger 键来记录钩子中捕获的错误。

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);

归属

存储图标由DinosoftLabs制作，来自www.flaticon.com