当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);
3条答案
按热度按时间kxeu7u2r1#
一种实现这一点而又不会改变你当前结构的方法是,首先把你的按钮改成这样:
然后在
setLangua
和langu
所在的组件内设置useEffect
,useEffect
将侦听localStorage
中的更改并更新状态:zf9nrax12#
你需要在
useEffect
hook中设置它,如果依赖项为空,它将只在组件挂载时运行。ycggw6v23#
您可以在将语言放入本地存储的同时设置语言,或者您可以使用useEffect钩子来设置subscribe to local storage changes。
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.