构建一个 useLocalStorage React Hook 包（与我一起为开源项目做贡献）

关于钩子

是的，还有其他选择！

我需要帮助

安装

基本用法

高级用法/选项

归因

我一直在内部测试一个React hook，就在昨天，我把它作为包useLocalStorage开源到了 npm 上。uselocalstorage

你对参与开源项目感兴趣吗？如果是的话，无论你的经验水平如何，我都需要你的帮助！

欢迎首次投稿者！

如果您感兴趣，请务必关注此处的 GitHub 代码库并查看未解决的问题。

请给这篇帖子点赞💓、🦄和🔖，以支持我们！

关于钩子

这个useLocalStorage钩子函数的作用与之前的钩子函数非常相似useState，但它还会将有状态数据持久化到浏览器的本地存储中。该钩子函数在 JavaScript 和 TypeScript 中均可用。

是的，还有其他选择！

我非常清楚，除了这个软件包之外，还有其他选择，甚至还有一些不错的替代方案！即便如此，我也相信，更多的尝试只会让产品变得更好，因为竞争能够让最佳方案脱颖而出。

我需要帮助

我已开始在GitHub Issues 页面上列出我需要帮助的各项任务。以下是我目前列出的内容：

• 添加CONTRIBUTING.md
• 添加CODE_OF_CONDUCT.md
• 使用"storage"窗口事件监听器防止不同标签页之间出现同步问题。
• 利用这个机会提出更多功能建议！

请注意，其中一些可能需要一些 React/Typescript 经验，但其他一些是管理方面的帮助，同样重要，任何人都可以提供帮助！

安装

使用 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钩子分别使用`Serializer`JSON.stringify和JSON.parse`Parserizer` 来序列化和解析数据。如果需要，可以配置自定义序列化器和/或解析器（详见下文“高级用法”部分）。

TypeScript 使用

类型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钩子函数接受一个可选的第三个参数。如果您需要使用除 `String`和 `String`options之外的其他序列化器和/或解析器，则可以使用此参数配置自定义序列化器和/或解析器。该对象还有一个键，用于记录钩子函数捕获到的错误。JSON.stringifyJSON.parseoptionslogger

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