在 React 中使用自定义 useLocalStorage Hook 来使用本地存储

我们的方法

创建钩子

测试我们的新钩子

我们可能会用到的一种浏览器端数据存储工具是本地存储。在本文中，我们将通过自定义 useLocalStorage hook 在 React 中使用本地存储。

如果您喜欢本教程，请给予💓、🦄或🔖并考虑：

• 订阅我的免费每周开发者新闻简报
• 订阅我的免费 YouTube 开发频道

我们的方法

为了解决这个问题，让我们将其分解成几个部分。

1. 提供本地存储密钥。本地存储基于键值对，因此我们需要能够key为存储的数据提供密钥。
2. 提供默认值。如果提供的 下的本地存储中没有现有数据key，我们需要defualtValue为我们的数据提供一个。
3. 将本地存储值加载到状态中（如果不存在本地存储值，则加载默认值）。我们仍会在应用中维护状态信息，因此仍然可以使用useState钩子。区别在于，如果本地存储值存在，我们会先使用它，然后再考虑用户提供的defaultValue。
4. 将状态数据保存到本地存储。当状态数据发生变化时，我们需要确保本地存储保持最新。因此，每当变量发生任何变化时，我们都需要运行一个 effect 来同步本地存储。
5. 公开状态变量和 setter。与钩子类似useState，我们的useLocalStorage钩子将返回一个包含两个元素的数组。第一个元素是变量，第二个元素是该变量的 setter。

创建钩子

让我们创建钩子！如上所述，钩子将接受两个输入：key将在 中使用的localStorage，以及defaultValue将在 中使用的 ，即使尚未输入任何内容localStorage。

useLocalStorage.js

export const useLocalStorage = (key, defaultValue) => {};

接下来，让我们在localStorage提供的下加载任何数据key。

export const useLocalStorage = (key, defaultValue) => {
  const stored = localStorage.getItem(key);
};

现在我们知道状态变量的初始值就是这个stored值。但是localStorage，如果provided 下还没有内容key，我们将默认使用用户提供的defaultValue。

注意：由于localStorage数据存储为字符串，我们确保JSON.parse从那里检索的任何数据。

export const useLocalStorage = (key, defaultValue) => {
  const stored = localStorage.getItem(key);
  const initial = stored ? JSON.parse(stored) : defaultValue;
};

现在我们有了initial状态的值，我们可以使用常规的useState钩子格式并返回状态变量及其设置器。

import { useState } from 'react';

export const useLocalStorage = (key, defaultValue) => {
  const stored = localStorage.getItem(key);
  const initial = stored ? JSON.parse(stored) : defaultValue;
  const [value, setValue] = useState(initial);
  return [value, setValue];
};

快完成了！我们还有一个需求没有满足：我们需要将数据保存到localStorage更改时的状态。我喜欢用一个在数据更改useEffect时触发的钩子来做这件事value。

import { useState, useEffect } from 'react';

export const useLocalStorage = (key, defaultValue) => {
  const stored = localStorage.getItem(key);
  const initial = stored ? JSON.parse(stored) : defaultValue;
  const [value, setValue] = useState(initial);

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

搞定！只要value发生变化，我们的效果就会运行，这意味着我们会将localStorage要设置的项目设置为JSON.stringify我们的value。需要注意的是， providedkey也是我们效果的依赖项，因此为了完整性，我们将其包含在依赖项数组中，即使我们并不期望它真的会改变。

测试我们的新钩子

让我们来试试这个钩子吧！我们将创建一个简单的组件，它有一个文本输入框，其值基于我们的useLocalStorage钩子。

App.jsx

import React from 'react';
import { useLocalStorage } from './useLocalStorage';

function App() {
  const [name, setName] = useLocalStorage('username', 'John');
  return (
    <input
      value={name}
      onChange={e => {
        setName(e.target.value);
      }}
    />
  );
}

export default App;

现在运行我们的应用。我们可以看到，首次运行应用时，状态name变量默认为字符串John。但是，当我们更改该值并刷新页面时，状态变量的值就默认为localStorage。

动图

成功！