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.
Ejemplos
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ómo solucionarlo
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.
Código corregido
function safeSetItem(key, value) {
try {
localStorage.setItem(key, value);
} catch (e) {
if (e.name === "QuotaExceededError") {
localStorage.clear();
localStorage.setItem(key, value);
}
}
}Errores relacionados
¿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