Tengo un enlace personalizado para administrar localStorage como se muestra a continuación:
import { useEffect, useState } from 'react' export default function useLocalStorage(key, initValue) { const [state, setState] = useState(() => { const value = localStorage.getItem(key); if (value !== null) { return JSON.parse(value); } localStorage.setItem(key, JSON.stringify(initValue)); return initValue; }) useEffect(() => { localStorage.setItem(key, state); }, [key, state]) return [state, setState]; }Se declara que este gancho personalizado usa la misma clave de almacenamiento local para dos o más componentes en una pantalla. p.ej.
const [state, setState] = useLocalStorage('key', false); En este momento, dado que los componentes que usan useLocalStorage quieren funcionar de acuerdo con el cambio de estado de localStorage , tratamos de usar el estado devuelto por useLocalStorage como el segundo parámetro de useEffect .
useEffect(() => { foobar() }, [state]); Esperaba que la función foobar() en useEffect funcionara cuando el "estado" cambia en todos los componentes que declararon este useEffect . Sin embargo, foobar() solo funcionó para un componente de varios componentes usando este mismo useEffect . ¿Por qué sucede esto? ¿Cómo hago para que funcione como yo quiero?
Debe configurar un detector de eventos para los cambios de almacenamiento a fin de tener el valor actualizado. Vea el código a continuación y la nota sobre el evento de almacenamiento:
import { useEffect, useState } from 'react' export default function useLocalStorage(key, initValue) { const [state, setState] = useState(() => { const value = localStorage.getItem(key); if (value !== null) { return JSON.parse(value); } localStorage.setItem(key, JSON.stringify(initValue)); window.dispatchEvent(new Event("storage")); return initValue; }); useEffect(() => { localStorage.setItem(key, state); window.dispatchEvent(new Event("storage")); }, [key, state]); useEffect(() => { const listenStorageChange = () => { setState(() => { const value = localStorage.getItem(key); if (value !== null) { return JSON.parse(value); } localStorage.setItem(key, JSON.stringify(initValue)); window.dispatchEvent(new Event("storage")); return initValue; }); }; window.addEventListener("storage", listenStorageChange); return () => window.removeEventListener("storage", listenStorageChange); }, []); return [state, setState]; } Quizás se pregunte por qué se usa este dispatchEvent . Bueno, esto es lo que dice MDN sobre el evento de almacenamiento :
El evento de
storagede la interfaz deWindowse dispara cuando un área de almacenamiento (almacenamientolocalStorage) ha sido modificada en el contexto deanother document.
Este dispatchEvent es necesario ya que también necesitamos escuchar los cambios en el mismo documento.