Cookies vs localStorage vs sessionStorage: Elige bien

Al crear una aplicación web, a menudo necesitas almacenar datos en el lado del cliente, ya sea la preferencia de tema de un usuario, un carrito de compras o un token de autenticación. Las tres opciones principales son cookies, localStorage y sessionStorage. Cada una tiene características distintas que la hacen adecuada para diferentes escenarios. Elegir la incorrecta puede provocar vulnerabilidades de seguridad, problemas de rendimiento o una mala experiencia de usuario.

Este artículo desglosa las diferencias, ofrece una guía práctica y te ayuda a decidir qué mecanismo de almacenamiento usar en tu próximo proyecto.

Comparación rápida

Antes de entrar en detalles, aquí tienes una visión general de alto nivel de los tres tipos de almacenamiento:

Cookies: el almacenamiento original del cliente

Las cookies existen desde los primeros días de la web. Son pequeñas piezas de datos (máx. ~4KB) que el navegador almacena y envía automáticamente al servidor con cada solicitud HTTP al mismo dominio.

Cuándo usar cookies

• Sesiones de autenticación: Almacena IDs de sesión o tokens que el servidor necesita validar en cada solicitud. Usa las flags HttpOnly, Secure y SameSite para mitigar riesgos de XSS y CSRF.
• Personalización del lado del servidor: Cuando el servidor debe conocer las preferencias del usuario (por ejemplo, idioma, tema) antes de renderizar la página.
• Seguimiento y analítica: Las cookies pueden persistir entre sesiones y compartirse entre subdominios si se configuran.

Consideraciones de seguridad

Las cookies se envían automáticamente, lo que las hace vulnerables a CSRF si se usan para autenticación sin protecciones adicionales. Configura siempre el atributo SameSite (Lax o Strict) y considera usar tokens CSRF. Para datos sensibles, usa HttpOnly para impedir el acceso desde JavaScript, reduciendo el impacto de XSS.

Ejemplo de cómo establecer una cookie segura en una respuesta HTTP:

Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=3600

localStorage: almacenamiento clave-valor persistente

localStorage proporciona un almacén clave-valor simple que persiste incluso después de cerrar el navegador. Los datos se almacenan por origen (protocolo + dominio + puerto) y no se envían al servidor automáticamente. Es ideal para almacenar datos no sensibles que deben sobrevivir a recargas de página y reinicios del navegador.

Cuándo usar localStorage

• Preferencias del usuario: Tema (oscuro/claro), tamaño de fuente, idioma o configuración de diseño.
• Caché: Almacena respuestas de API o datos estáticos para reducir solicitudes de red y mejorar la experiencia offline.
• Estado del lado del cliente: Contenido del carrito de compras, borradores de formularios o feature flags.

Consideraciones de seguridad

localStorage es accesible vía JavaScript, por lo que cualquier vulnerabilidad XSS puede exponer todos los datos almacenados. Nunca almacenes información sensible como contraseñas, números de identificación personal o tokens de autenticación a menos que tengas protecciones robustas contra XSS. Si debes almacenar tokens, considera usar el enfoque de cookies HttpOnly en su lugar.

Ejemplo de uso de localStorage:

// Guardar preferencia del usuario
localStorage.setItem('theme', 'dark');

// Recuperar preferencia
const theme = localStorage.getItem('theme');

// Eliminar elemento
localStorage.removeItem('theme');

sessionStorage: almacenamiento por pestaña

sessionStorage es similar a localStorage pero con una vida útil más corta: los datos se borran cuando se cierra la pestaña o ventana. Está limitado a una sola pestaña, por lo que los datos no se comparten entre pestañas o ventanas, incluso para el mismo origen.

Cuándo usar sessionStorage

• Formularios de varios pasos: Almacena temporalmente los datos del formulario a medida que el usuario avanza por los pasos, sin persistir después de completarlo.
• Estado de una sola pestaña: Datos que no deben filtrarse entre pestañas, como un estado de autenticación temporal o un token de un solo uso.
• Operaciones sensibles: Cuando quieres que los datos se borren automáticamente al cerrar la pestaña, reduciendo la exposición.

Consideraciones de seguridad

Al igual que localStorage, sessionStorage es vulnerable a XSS. Sin embargo, su vida útil limitada y su alcance por pestaña reducen la ventana de oportunidad para los atacantes. Aun así, evita almacenar datos altamente sensibles.

Ejemplo de uso de sessionStorage:

// Guardar datos del formulario
sessionStorage.setItem('formStep1', JSON.stringify({name: 'John'}));

// Recuperar datos del formulario
const step1 = JSON.parse(sessionStorage.getItem('formStep1'));

Cómo elegir: guía de decisión

Usa la siguiente lista ordenada para guiar tu decisión:

1. ¿El servidor necesita leer los datos en cada solicitud? Si es así, usa cookies. Ejemplo: IDs de sesión.
2. ¿Los datos deben persistir entre sesiones del navegador? Si es así, usa localStorage. Ejemplo: preferencias del usuario.
3. ¿Los datos deben limitarse a una sola pestaña? Si es así, usa sessionStorage. Ejemplo: datos de formularios de varios pasos.
4. ¿Los datos son sensibles? Evita almacenarlos en localStorage o sessionStorage. Usa cookies HttpOnly para tokens y nunca almacenes contraseñas.
5. ¿Los datos son grandes? Las cookies están limitadas a ~4KB; localStorage y sessionStorage ofrecen mucha más capacidad.

Mejores prácticas de seguridad

• Valida y sanitiza siempre la entrada para prevenir XSS, que puede comprometer cualquier almacenamiento del lado del cliente.
• Usa cookies HttpOnly, Secure y SameSite para tokens de autenticación para mitigar XSS y CSRF.
• Evita almacenar datos sensibles en localStorage o sessionStorage. Si es imprescindible, cífralos y usa una caducidad corta.
• Implementa una Política de Seguridad de Contenido (CSP) para reducir los riesgos de XSS.
• Borra regularmente los datos obsoletos para evitar alcanzar los límites de almacenamiento y reducir la exposición.

Preguntas frecuentes

¿Puedo usar localStorage para tokens de autenticación?

No es recomendable porque localStorage es accesible vía JavaScript, lo que hace que los tokens sean vulnerables a XSS. Prefiere cookies HttpOnly con las flags Secure y SameSite.

¿Qué pasa con sessionStorage cuando duplico una pestaña?

Cuando duplicas una pestaña, la nueva pestaña obtiene una copia del sessionStorage de la pestaña original en el momento de la duplicación. Después de eso, son independientes.

¿Se envían las cookies al servidor en cada solicitud?

Sí, las cookies del dominio actual se incluyen automáticamente en cada solicitud HTTP, lo que puede afectar el rendimiento si almacenas demasiados datos. Úsalas con moderación.

¿Necesitas formatear o validar rápidamente los datos JSON que estás almacenando? Prueba nuestro Formateador JSON para embellecer y depurar tus payloads JSON antes de guardarlos en el almacenamiento del cliente.