JavaScript Academy · Lección

Eventos y límites de almacenamiento

Reaccione a los cambios y respete los límites de cuota.

Eventos y límites de almacenamiento es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Reaccionar a los cambios del almacenamiento

El evento storage permite que una pestaña reaccione cuando otra pestaña cambia localStorage. Esto permite una sincronización sencilla entre pestañas.

Escuchar el evento storage

Añada un listener a window. Se activa en OTRAS pestañas del mismo origen cada vez que cambia localStorage, pero no en la pestaña que realizó el cambio.

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

El objeto StorageEvent

El evento contiene key, oldValue, newValue, storageArea y url. En conjunto, describen exactamente qué cambió.

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

Solo se activa en otras pestañas

Un detalle sutil: el evento NO se activa en la misma pestaña que llamó a setItem. Su objetivo es notificar a las demás, así que no dependa de él para actualizar la misma pestaña.

Patrón de sincronización entre pestañas

Use el evento para mantener las pestañas sincronizadas; por ejemplo, cierre la sesión del usuario en todas partes cuando una pestaña borre el token de autenticación.

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

Detectar clear()

Cuando se ejecuta clear(), el evento se activa con key establecido en null. Gestione este caso para restablecerlo todo.

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

La cuota de almacenamiento

Cada origen tiene un presupuesto limitado, normalmente de alrededor de 5MB en total para localStorage. Es mucho menos que IndexedDB, así que almacene solo cantidades moderadas.

Errores por exceder la cuota

Exceder la cuota genera un QuotaExceededError en setItem. Siempre incluya las escrituras grandes o que no sean de confianza en un bloque try/catch.

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

UTF-16 cuenta el doble

Las cadenas se almacenan como UTF-16, por lo que cada carácter usa aproximadamente 2 bytes. Una cuota de 5MB contiene unos 2,5 millones de caracteres, y menos si se trata de texto no ASCII.

Estimar el uso

Puede medir aproximadamente el uso sumando las longitudes de las claves y los valores. No existe una API exacta, pero esto proporciona una estimación útil.

let total = 0;
for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");

Cuándo usar algo más grande

Para datos grandes o estructurados que superen unos pocos MB, recurra a IndexedDB. Web Storage es ideal para indicadores, preferencias y tokens pequeños.

Comprobación rápida

Eventos y límites del almacenamiento.

Resumen

El evento storage notifica a OTRAS pestañas de un origen sobre los cambios en localStorage y contiene key, oldValue y newValue (key es null al ejecutar clear). Las cuotas son de aproximadamente 5MB y escribir más allá de ellas genera un QuotaExceededError, así que incluya las escrituras arriesgadas en un bloque try/catch y use IndexedDB para datos más grandes.

Preguntas frecuentes

¿La lección «Eventos y límites de almacenamiento» es gratis?

Sí — el texto completo de «Eventos y límites de almacenamiento» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Eventos y límites de almacenamiento»?

Reaccione a los cambios y respete los límites de cuota. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Eventos y límites de almacenamiento»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy