react使用localstorage

React 中使用 localStorage 主要是为了持久化存储数据，特别是那些不需要服务器交互、可以跨页面共享的数据。以下是如何在 React 应用中操作 localStorage 的简单步骤：

1. 引入 `localStorage` API：JavaScript 自带了 `localStorage` 对象，它允许在客户端存储键值对。

import { useEffect } from 'react';

2. 使用 `useEffect` 钩子来读取或写入数据：
- 读取数据：

     const [dataFromStorage, setDataFromStorage] = useState(null);
     
     useEffect(() => {
       if (window.localStorage.getItem('yourKey')) {
         setDataFromStorage(JSON.parse(window.localStorage.getItem('yourKey')));
       }
     }, []);

- 写入数据：

     const saveDataToLocalStorage = (newData) => {
       window.localStorage.setItem('yourKey', JSON.stringify(newData));
     };

3. 当组件的状态改变时，你可以选择是否同步到 localStorage：

   const handleButtonClick = () => {
     // 更新状态
     const newData = ...;
     setNewData(newData);
     saveDataToLocalStorage(newData);
   };

4. 清除数据：

   const clearLocalStorage = () => {
     window.localStorage.removeItem('yourKey');
   };

记得将 `'yourKey'` 替换为你实际使用的键名。当你需要在应用程序的不同部分之间共享数据时，可以利用 localStorage 的特性。