JavaScript

Qué significa localStorage cuota excedida y cómo solucionarlo

Referencia del error

localStorage cuota excedida

Lenguaje

JavaScript

Severidad

Media

Cuándo ocurre

Se lanza un QuotaExceededError (DOMException) cuando una escritura en localStorage o sessionStorage superaría el límite de almacenamiento del navegador, típicamente alrededor de 5 MB por origen.

Posibles soluciones

Envuelve localStorage.setItem() en un try/catch para QuotaExceededError. Elimina elementos antiguos o grandes antes de escribir. Para datos más grandes, usa IndexedDB que no tiene límite de tamaño fijo. Considera una estrategia de evicción de caché (LRU, TTL) para mantener el tamaño de almacenamiento acotado.

Errores relacionados

TypeError Referencia circular en JSON

Más detalles

Se lanza un QuotaExceededError (DOMException) cuando una escritura en localStorage o sessionStorage superaría el límite de almacenamiento del navegador, típicamente alrededor de 5 MB por origen. El nombre del error varía ligeramente entre navegadores.

Por qué ocurre

•Almacenar objetos JSON grandes o imágenes codificadas en base64 en localStorage.
•Acumular muchos elementos pequeños con el tiempo que juntos superan la cuota.
•Múltiples pestañas o la misma aplicación con el tiempo llenando el almacenamiento.

Posibles soluciones

Envuelve localStorage.setItem() en un try/catch para QuotaExceededError. Elimina elementos antiguos o grandes antes de escribir. Para datos más grandes, usa IndexedDB que no tiene límite de tamaño fijo. Considera una estrategia de evicción de caché (LRU, TTL) para mantener el tamaño de almacenamiento acotado.

Ejemplos

JavaScript

Código que causa el error

const bigData = "x".repeat(10 * 1024 * 1024); // 10 MB
localStorage.setItem("cache", bigData);

Error en la terminal

DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'cache' exceeded the quota.

Código corregido

function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
  } catch (e) {
    if (e.name === "QuotaExceededError") {
      localStorage.clear();
      localStorage.setItem(key, value);
    }
  }
}

Practica en inglés

¿Cómo le explicarías un localStorage Quota Exceeded a un compañero dev? Elige la frase correcta:

"I hit an error...

¿Listo para practicar tu inglés en el trabajo?

Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.

Prueba Lingua-e gratis