当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 和languy useffect将收听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);
}, []);

Answer 2

您需要在使用挂钩中设置它，并且具有空依赖性，仅在组件安装时才会运行。

const [langu,setLangua] = useState(language)
useEffect(() => {
let language = ""
if (typeof window !== 'undefined') {
    if ( localStorage.getItem("language")  === null) {
        language = "english"
    }

    if ( localStorage.getItem("language")  !== null) {
        language = localStorage.getItem("language")
    }
}
setLanguage(language)
}, [])

Answer 3

您可以在将其放入本地存储中同时setlangua。或者，您可以订阅本地存储更改使用效果钩。

    import { useCallback, useEffect, useState } from 'react'

    const [userLang, setUserLang] = useState('english')

    const getLangFromLocalStorage = useCallback(() => {
        return localStorage.getItem('userLang');
    }, []);

    useEffect(() => {
      function checkUserLang() {
        const value = getLangFromLocalStorage()
    
        // Do with value what you want
    
        if (value) {
          setUserLang(value)
        }
      }
    
      window.addEventListener('storage', checkUserLang)
    
      return () => {
        window.removeEventListener('storage', checkUserLang)
      }
    }, [])

    // Set userLang initially when component did mount

    useEffect(() => {
        const value = getLangFromLocalStorage();
        if (value) {
            setUserLang(value);
        }
    }, []);

注意：这在进行更改的同一页面上无法使用 - 这实际上是使用存储在域上使用存储来同步任何更改的其他页面的一种方式。其他域上的页面无法访问相同的存储对象。