Cómo cambiar el estado cuando cambió el valor localStorage . Por ejemplo, tengo un botón de cambio de idioma, como francés e inglés, cuando hago clic en inglés, se almacenará en localStorage , cuando hago clic en inglés también lo hará.
Cuando hago clic en francés, todo el proyecto debe verse en francés, también cuando hago clic en inglés, quiero hacer eso. Entonces, ¿cómo puedo cambiar el estado cuando actualizo 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);Una forma de lograr esto que no cambiaría mucho su estructura actual es primero cambiar sus botones a esto:
<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> Y luego configúrelo dentro del componente donde tiene setLangua y langu an useEffect que escucharía los cambios en el localStorage y actualizaría el estado:
useEffect(() => { const listenStorageChange = () => { if (localStorage.getItem("language") === null) { setLangua("english"); } else { setLangua(localStorage.getItem("language")); } }; window.addEventListener("storage", listenStorageChange); return () => window.removeEventListener("storage", listenStorageChange); }, []);Puede configurar Idioma al mismo tiempo que lo coloca en el almacenamiento local. O puede suscribirse a los cambios de almacenamiento local con el enlace 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.
necesita configurarlo en useEffect hook, con dependencias vacías, se ejecutará solo cuando se monte el componente.
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) }, [])