react函数组件本地存储数据

要在 React 函数组件中存储数据，可以使用浏览器的本地存储 API，比如 localStorage 或 sessionStorage。这些 API 可以让你在浏览器中存储键值对数据，并且数据可以跨页面和会话保存。

例如，你可以在组件中使用 useState 钩子来存储数据，并在 useEffect 钩子中使用 localStorage API 来将数据保存到本地存储中。示例代码如下：

import React, { useState, useEffect } from "react";

function MyComponent() {
  const [data, setData] = useState("");

  useEffect(() => {
    const savedData = localStorage.getItem("myData");
    if (savedData) {
      setData(savedData);
    }
  }, []);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  useEffect(() => {
    localStorage.setItem("myData", data);
  }, [data]);

  return (
    <div>
      <input value={data} onChange={handleChange} />
    </div>
  );
}

export default MyComponent;

在上面的示例中，我们使用 useState 钩子来存储数据，并在组件挂载时使用 useEffect 钩子从本地存储中加载数据。然后，我们在第二个 useEffect 钩子中监听 data 变量的变化，并将数据保存到本地存储中。最后，我们将数据绑定到 input 元素，并在用户输入时更新数据。