[英]How to change state when localStorage value changed in Next.js?
How to change state when localStorage
value changed.当
localStorage
值改变时如何改变状态。 For example, I have a language switching button, like French and English, when I click English, it will be storing to localStorage
, when I click English it will also.例如,我有一个语言切换按钮,比如法语和英语,当我点击英语时,它会存储到
localStorage
,当我点击英语时它也会。
When I click the French the whole project need to see in French, also when I click English, want to do like that, it So how can I change state when I update 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);
One way to achieve this that wouldn't change that much your current structure is first to change your buttons to this:一种不会改变您当前结构的方法是首先将您的按钮更改为:
<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>
And then set up inside the component where you have setLangua
and langu
an useEffect
that would listen to changes in the localStorage
and update the state:然后在你有
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);
}, []);
you need set it in useEffect
hook, with empty dependences, it will run only when the component mount.你需要在
useEffect
钩子中设置它,依赖为空,它只会在组件挂载时运行。
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)
}, [])
You can setLangua at the same time as putting it in local storage.您可以在将其放入本地存储的同时设置Langua。 Or you can subscribe to local storage changes with the useEffect hook.
或者,您可以使用 useEffect 挂钩订阅本地存储更改。
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);
}
}, []);
Note: This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.