当 localStorage 值改变时如何改变状态？

Question

当值改变时如何改变状态localStorage。例如，我有一个语言切换按钮，如法语和英语，当我点击英语时，它会存储到localStorage，当我点击英语时它也会存储到 。

当我单击法语时，整个项目需要以法语显示，当我单击英语时，也想这样做，那么更新时如何更改状态localStorage？

<button onclick={()=>localStorage.setItem("language",'english')}>English</button>
<button onclick={()=>localStorage.setItem("language",'french')}>French</button>

let language;
if (typeof window !== "undefined") {
  if (localStorage.getItem("language") === null) {
    language = "english";
  }

  if (localStorage.getItem("language") !== null) {
    language = localStorage.getItem("language");
  }
}

const [langu, setLangua] = useState(language);

console.log(langu);

Answer 1

实现此目的的一种方法不会改变您当前的结构，首先将按钮更改为：

<button
  onClick={() => {
    localStorage.setItem("language", "english");
    window.dispatchEvent(new Event("storage"));
  }}
>
  English
</button>
<button
  onClick={() => {
    localStorage.setItem("language", "french");
    window.dispatchEvent(new Event("storage"));
  }}
>
  French
</button>

然后在您拥有的组件内部进行设置，setLangua该langu组件useEffect将监听localStorage并更新状态的变化：

useEffect(() => {
  const listenStorageChange = () => {
    if (localStorage.getItem("language") === null) {
      setLangua("english");
    } else {
      setLangua(localStorage.getItem("language"));
    }
  };
  window.addEventListener("storage", listenStorageChange);
  return () => window.removeEventListener("storage", listenStorageChange);
}, []);