Almacenamiento en el navegador: comparativa entre cookies, Web Storage e IndexedDB

Qué es

Las cookies son pares nombre-valor fijados por el servidor (Set-Cookie) o por script, y se envían de vuelta con cada solicitud que coincide. El RFC 6265 pide a los user agents que admitan al menos 4096 bytes por cookie, 50 cookies por dominio y 3000 en total, y les permite descartar cookies que superen esos límites. Web Storage (el estándar HTML) ofrece localStorage, que persiste por origen, y sessionStorage, que está delimitado a un único traversable de nivel superior (una pestaña o ventana) y termina con él; ambos son síncronos y solo almacenan cadenas. La página de cuotas de MDN indica que Web Storage está limitado a 10 MiB en total, 5 MiB de almacenamiento local y 5 MiB de almacenamiento de sesión por origen, y que superar ese límite lanza QuotaExceededError. IndexedDB es asíncrono y transaccional, almacena valores estructurados y blobs con índices, y recurre a la cuota general del origen, que en los navegadores basados en Chromium puede alcanzar el 60 % del disco. El almacenamiento es best-effort de forma predeterminada y puede descartarse bajo presión; navigator.storage.persist() solicita persistencia, navigator.storage.estimate() informa del uso y de la cuota, y la navegación privada suele descartar los datos al terminar la sesión.

Por qué importa

Elegir mal crea problemas de seguridad o de fiabilidad: un token de sesión en localStorage puede leerlo cualquier script inyectado, un estado grande en las cookies infla cada solicitud, una escritura síncrona grande en localStorage bloquea el hilo principal, y una aplicación que da por hecho que los datos best-effort siempre estarán ahí falla en silencio tras un descarte.

Cómo aplicarlo

• Datos que el servidor necesita en cada solicitud (identificador de sesión): una cookie pequeña con HttpOnly, Secure y un ámbito de ruta; nada más va en las cookies.
• Preferencias pequeñas exclusivas del cliente: localStorage, con cada acceso envuelto en try/catch, porque puede lanzar una excepción cuando está lleno o bloqueado.
• Estado transitorio por pestaña (progreso de un asistente, filtros en borrador): sessionStorage.
• Registros, archivos, cachés sin conexión: IndexedDB, detrás de un pequeño wrapper para que el resto del código trabaje con promesas.
• Versionar la forma almacenada (settings:v2) y migrar o descartar en caso de discrepancia.
• Antes de depender del almacenamiento para datos críticos, llamar a persist() y tratar una negativa como «puede desaparecer».

Trampas

El almacenamiento es por origen: app.example.com y example.com no comparten localStorage, mientras que una cookie con Domain=example.com se envía a ambos, y las cookies no aíslan por puerto. Los navegadores pueden particionar aún más el almacenamiento de un sitio incrustado en frames de terceros. JSON.stringify descarta undefined y convierte Date en cadenas; conviene deserializar de forma deliberada.