reacthooks本地存储

React Hooks 中可以使用 localStorage 来进行本地存储。可以使用 useState 和 useEffect 两个 Hook 来实现。

首先，使用 useState 来定义一个状态变量，然后使用 useEffect 来监听这个状态变量的变化，并将其存储到 localStorage 中。代码如下：

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

function App() {
  const [count, setCount] = useState(() => {
    const storedCount = localStorage.getItem('count');
    return storedCount !== null ? Number(storedCount) : 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default App;

在上面的代码中，我们使用了 useState 来定义了一个名为 count 的状态变量，并使用了一个函数来初始化它。这个函数会从 localStorage 中获取之前存储的 count 值，如果没有则返回 0。

然后，我们使用了 useEffect 来监听 count 的变化，并将其存储到 localStorage 中。useEffect 的第二个参数是一个数组，表示需要监听的变量，当这些变量发生变化时，useEffect 才会执行。