Escuchar eventos de almacenamiento

Web Storage emite un evento storage en todas las demás pestañas del mismo origen cada vez que cambia localStorage. Es la forma más sencilla de mantener sincronizadas varias pestañas abiertas de la misma aplicación, por ejemplo, para propagar un cierre de sesión o un cambio de tema.

Asocie el controlador a window: window.addEventListener("storage", handleStorage). El listener solo se activa en otras pestañas o ventanas del mismo origen, nunca en la pestaña que realizó el cambio, que ya conoce la actualización.

El evento contiene key (la clave que cambió), oldValue y newValue (cadenas o null), url (la página que desencadenó el cambio) y storageArea (el objeto Storage: localStorage o sessionStorage).

Cuando otra pestaña llama a localStorage.clear(), el evento de almacenamiento se emite una vez con key === null y con oldValue y newValue en null. Detecte este patrón para gestionar un borrado masivo por separado de las actualizaciones de una sola clave.

Una llamada a removeItem emite el evento con newValue === null y oldValue con la cadena anterior. Distinga entre «clave eliminada» y «clave establecida en la cadena null» comprobando que newValue sea estrictamente null y no la cadena "null".

El evento nunca se emite en la pestaña que escribió el cambio. Para reaccionar a sus propias escrituras, emita un evento personalizado después de setItem o envuelva setItem en un helper que llame tanto a la API de almacenamiento como al bus de eventos de la aplicación.

Establezca una clave como auth:logout con una marca de tiempo cuando un usuario cierre sesión. Las demás pestañas escuchan esa clave en el evento de almacenamiento y borran inmediatamente su propio estado de sesión, redirigiendo a la página de inicio de sesión sin que el usuario tenga que volver a hacer clic.

Cuando el usuario cambia el tema en una pestaña, escriba theme en localStorage. El controlador de almacenamiento de cada una de las demás pestañas lee el nuevo valor y aplica document.documentElement.dataset.theme; el cambio aparece al instante en todas las pestañas abiertas.

Un único controlador puede atender muchas funcionalidades comprobando e.key. Una instrucción switch mantiene legible el distribuidor: cada case gestiona una clave de almacenamiento e ignora los cambios no relacionados que otras funcionalidades escriban en el mismo objeto Storage.

sessionStorage es específico de cada pestaña; sus escrituras nunca emiten eventos de almacenamiento en otras pestañas porque cada una tiene su propio sessionStorage independiente. Use localStorage cuando necesite señalización entre pestañas, aunque elimine la clave inmediatamente después.

Para una mensajería más completa entre pestañas, la API BroadcastChannel envía datos estructurados sin tocar el almacenamiento: new BroadcastChannel("app").postMessage({ type: "logout" }). Use BroadcastChannel para señales transitorias y los eventos de almacenamiento para el estado que también deba persistir.

El evento de almacenamiento proporciona notificaciones entre pestañas cada vez que localStorage cambia en otra pestaña, e incluye key, oldValue, newValue y storageArea. No se emite en la pestaña que escribe, por lo que debe combinarlo con un evento personalizado para distribuir tanto los cambios locales como los remotos. Úselo para propagar cierres de sesión, sincronizar temas y mantener coherente cualquier estado entre ventanas del navegador.