React useLocalStorage 钩子

简介

在本实验中，我们将探索 React 中的 useLocalStorage 钩子。本实验的目的是帮助你理解如何创建一个持久化到 localStorage 的有状态值以及一个更新它的函数。你将学习如何使用 useState 钩子、try-catch 块以及 Storage.getItem() 和 Storage.setItem() 方法来从 localStorage 存储和检索数据。在本实验结束时，你将更好地理解如何构建利用 localStorage 来存储和持久化数据的 React 应用程序。

Skills Graph

React useLocalStorage 钩子

虚拟机中已提供 index.html 和 script.js。一般来说，你只需要在 script.js 和 style.css 中添加代码。

此函数创建一个保存到 localStorage 的值以及一个用于修改它的函数。其工作原理如下：

1. 要创建该值，使用 useState() 钩子并传入一个函数来延迟初始化它。
2. 要从 localStorage 中检索保存的值，使用 try...catch 块和 Storage.getItem()。如果没有保存的值，则使用 Storage.setItem() 存储 defaultValue 并将其用作初始状态。如果出现错误，则使用 defaultValue。
3. 定义一个函数，该函数使用传入的值更新状态变量，并使用 Storage.setItem() 保存它。

以下是代码：

const useLocalStorage = (keyName, defaultValue) => {
  const [storedValue, setStoredValue] = React.useState(() => {
    try {
      const value = window.localStorage.getItem(keyName);

      if (value) {
        return JSON.parse(value);
      } else {
        window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
        return defaultValue;
      }
    } catch (err) {
      return defaultValue;
    }
  });

  const setValue = (newValue) => {
    try {
      window.localStorage.setItem(keyName, JSON.stringify(newValue));
    } catch (err) {}
    setStoredValue(newValue);
  };

  return [storedValue, setValue];
};

你可以在应用中这样使用此函数：

const MyApp = () => {
  const [name, setName] = useLocalStorage("name", "John");

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

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了 React useLocalStorage 钩子实验。你可以在 LabEx 中练习更多实验来提升你的技能。