如何在React中使用本地存储来存储状态（附代码）

一个整洁的自定义 React Hook，展示了如何在React中使用本地存储来存储状态。你可以在任何React组件中使用它，它允许你向本地存储写入和读出状态。

import * as React from 'react';

const useLocalStorage = (storageKey, fallbackState) => {
  const [value, setValue] = React.useState(
    JSON.parse(localStorage.getItem(storageKey)) ?? fallbackState
  );

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

  return [value, setValue];
};

const App = () => {
  const [isOpen, setOpen] = useLocalStorage('is-open', false);

  const handleToggle = () => {
    setOpen(!isOpen);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      {isOpen && <div>Content</div>}
    </div>
  );
};

export default App;

不过，本地存储钩子只是作为一种学习经验存在。如果你在生产中依赖本地存储的React应用程序，你应该检查更广泛使用的钩子（因此是健壮的）钩子，这些钩子作为一个开源库来维护。例如，对于本地存储，我个人总是回落到这个本地存储钩。