El Atributo ONSTORAGE

El evento storage se dispara cuando se modifican los datos en localStorage o sessionStorage desde otra pestaña o ventana del mismo origen.

El evento storage se dispara cuando se modifican los datos en localStorage o sessionStorage desde otra pestaña o ventana del mismo origen. Es útil para:

  • Sincronizar estados entre pestañas.

  • Actualizar interfaces en tiempo real.

  • Implementar sistemas de notificaciones entre ventanas.

  • Gestionar sesiones compartidas.

???? Características clave

  • No se activa en la misma pestaña: Solo detecta cambios realizados desde otras pestañas/ventanas.

  • Requiere el mismo origen: Las pestañas deben compartir el mismo dominio, protocolo y puerto.

  • Información del cambio: Proporciona detalles sobre la clave modificada, valor antiguo y nuevo.

???? Sintaxis básica

1. Escuchar cambios en el almacenamiento

javascript
Copy
window.addEventListener("storage", (event) => {
    console.log("Cambio detectado en el almacenamiento:", event);
});

2. Propiedades del evento storage

Propiedad Descripción
key Nombre de la clave modificada (null si se usó localStorage.clear())
oldValue Valor anterior de la clave (si existía)
newValue Nuevo valor de la clave (si se eliminó, será null)
url URL de la página que realizó el cambio
storageArea Objeto afectado (localStorage o sessionStorage)

???? Ejemplos prácticos

1. Sincronizar tema oscuro entre pestañas

javascript
Copy
// Escuchar cambios en el almacenamiento
window.addEventListener("storage", (event) => {
    if (event.key === "tema-oscuro") {
        const tema = event.newValue === "true";
        aplicarTema(tema);
    }
});

// Función para cambiar el tema
function aplicarTema(temaOscuro) {
    document.body.classList.toggle("tema-oscuro", temaOscuro);
}

// Guardar preferencia (ejemplo desde otra pestaña)
localStorage.setItem("tema-oscuro", "true");

2. Actualizar lista de tareas en tiempo real

javascript
Copy
// Escuchar cambios en la clave "tareas"
window.addEventListener("storage", (event) => {
    if (event.key === "tareas") {
        const tareas = JSON.parse(event.newValue || "[]");
        renderizarTareas(tareas);
    }
});

// Función para renderizar
function renderizarTareas(tareas) {
    const lista = document.getElementById("lista-tareas");
    lista.innerHTML = tareas.map(t => `<li>${t}</li>`).join("");
}

// Ejemplo de modificación desde otra pestaña:
localStorage.setItem("tareas", JSON.stringify(["Comprar leche", "Estudiar"]));

⚠️ Consideraciones importantes

1. Limitaciones

  • No se activa en la misma pestaña: El evento solo se dispara en otras ventanas/pestañas.

  • Datos como cadenas: localStorage almacena solo strings. Usa JSON.parse y JSON.stringify para objetos.

  • Cuota de almacenamiento: Límite de ~5-10 MB por dominio (depende del navegador).

2. Seguridad

  • Política de mismo origen: Solo pestañas del mismo dominio pueden acceder a los datos.

  • No usar para datos sensibles: localStorage es accesible vía JavaScript y vulnerable a XSS.

???? Casos de uso avanzados

1. Sistema de autenticación compartida

javascript
Copy
// Escuchar cambios en el token de autenticación
window.addEventListener("storage", (event) => {
    if (event.key === "auth-token" && event.newValue === null) {
        // Cerrar sesión en todas las pestañas si el token se elimina
        redirigirALogin();
    }
});

// Cerrar sesión desde cualquier pestaña:
localStorage.removeItem("auth-token");

2. Chat entre pestañas

javascript
Copy
// Escuchar nuevos mensajes
window.addEventListener("storage", (event) => {
    if (event.key === "chat-mensajes") {
        const mensajes = JSON.parse(event.newValue || "[]");
        mostrarMensajes(mensajes);
    }
});

// Enviar mensaje (ejemplo):
function enviarMensaje(texto) {
    const mensajes = JSON.parse(localStorage.getItem("chat-mensajes") || "[]");
    mensajes.push(texto);
    localStorage.setItem("chat-mensajes", JSON.stringify(mensajes));
}

???? Troubleshooting común

1. El evento no se dispara

  • Verifica que las pestañas compartan el mismo origen (http:// vs https:// cuenta como diferente).

  • Asegúrate de no estar probando en la misma pestaña donde se modifica el almacenamiento.

2. Valores undefined o errores de formato

  • Usa siempre JSON.parse/JSON.stringify para objetos:

    javascript
    Copy
    // Guardar
localStorage.setItem("usuario", JSON.stringify({ nombre: "Ana" }));

// Leer
const usuario = JSON.parse(localStorage.getItem("usuario"));

???? Conclusión

El evento storage permite:

  • Crear experiencias multi-pestaña coherentes.

  • Sincronizar datos en tiempo real sin servidores.

  • Implementar funcionalidades colaborativas.

Ejemplo final avanzado (Carrito de compras sincronizado):

javascript
Copy
// Escuchar cambios en el carrito
window.addEventListener("storage", (event) => {
    if (event.key === "carrito") {
        const carrito = JSON.parse(event.newValue || "[]");
        actualizarCarritoUI(carrito);
    }
});

// Función para añadir producto
function agregarAlCarrito(producto) {
    const carrito = JSON.parse(localStorage.getItem("carrito") || "[]");
    carrito.push(producto);
    localStorage.setItem("carrito", JSON.stringify(carrito));
}

// Función para limpiar carrito
function vaciarCarrito() {
    localStorage.removeItem("carrito");
}

Con este conocimiento, podrás crear aplicaciones web que mantengan un estado consistente entre múltiples instancias del navegador. ¡Experimenta y lleva tu desarrollo al siguiente nivel! ????????