DOMINICODE

Tag: Cookies

  • Diferencias Clave Entre Local Storage y Cookies

    Diferencias Clave Entre Local Storage y Cookies

    Qué diferencias hay Local Storage vs Cookies, cuándo usar uno y otro

    Tiempo estimado de lectura: 6 min

    • Las cookies viajan con cada petición HTTP, mientras que Local Storage no lo hace.
    • Cada tecnología tiene implicaciones de seguridad, rendimiento y experiencia de usuario.
    • Cuando usar cada uno depende de las necesidades específicas de almacenamiento.

    Tabla de contenidos

    Qué hace cada una (resumen técnico)

    • Cookies: pequeños pares clave‑valor (≈4 KB) diseñados para ser enviados automáticamente por el navegador en cada request al servidor. Se pueden crear desde el servidor (Set‑Cookie) o desde cliente. Soportan flags: HttpOnly, Secure, SameSite. (Docs: MDN — Cookies)
    • Local Storage: API Web Storage (HTML5). Almacén key/value en el navegador, persistente, mayor capacidad por dominio (5–10 MB típicos). Solo accesible desde JavaScript — nunca se envía automáticamente al servidor. (MDN — localStorage)

    Diferencias que importan en producción

    1. Transmisión y ancho de banda:
      • Cookies: se adjuntan en headers HTTP; cada KB añadida penaliza todas las requests. Evita almacenar grandes blobs en cookies.
      • Local Storage: no afecta tráfico; ideal para caché UI y datos voluminós.
    2. Persistencia y scope:
      • Cookies: caducidad configurable, scope por dominio/path y subdominios.
      • Local Storage: persistencia indefinida hasta borrado manual, scope por origen (protocol + host + port).
    3. Seguridad (XSS vs CSRF) — el punto crítico:
      • Cookies con HttpOnly impiden lectura por JavaScript: buen remedio contra robo de tokens vía XSS.
      • Local Storage es totalmente legible por JS: si hay XSS, el atacante puede exfiltrar cualquier dato allí guardado.
      • Cookies se envían automáticamente → riesgo CSRF salvo que uses SameSite, tokens CSRF o estrategias de double‑submit. (Guía SameSite) Para entender XSS/CSRF: OWASP tiene guías prácticas — XSS CSRF

    Reglas prácticas: cuándo usar cada uno

    Usa Cookies cuando:

    • Guardas tokens de autenticación o session IDs sensibles. Implementa HttpOnly + Secure + SameSite donde aplique.
    • Necesitas que el servidor reconozca automáticamente al cliente en cada petición.
    • Requieres expiración y control centralizado del ciclo de sesión.

    Usa Local Storage cuando:

    • Guardas preferencias de UI, temas, estado de formularios, pequeños cachés que mejoran UX.
    • Necesitas almacenamiento más grande y rápido sin impactar la red (listas estáticas, drafts).
    • No guardas secretos ni tokens que comprometan cuentas si se filtran.

    Ejemplos concretos

    Guardar preferencia de tema (Local Storage):

    localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

    Setear cookie segura desde servidor (Node/Express):

    res.cookie('session', sessionId, { httpOnly: true, secure: true, sameSite: 'Lax', maxAge: 1000*60*60 });

    Evita este patrón inseguro (no lo copies): Almacenar JWT de acceso en localStorage en una app pública: fácil exfiltración si tienes XSS.

    Errores comunes que cuestan

    • Poner el token principal en localStorage “porque es más cómodo”. Resultado: una inyección de script y sesión comprometida.
    • Volcar demasiado estado en cookies y degradar las peticiones móviles.
    • No configurar SameSite o CSRF tokens cuando usas cookies, dejando la app abierta a forzados desde otros orígenes.

    Conclusión práctica

    No hay “mejor” absoluto. Pregunta primero: ¿este dato necesita viajar automáticamente al servidor y es sensible? → Cookies (bien configuradas). ¿Es estado de UI o caché que no debe hinchar el tráfico? → Local Storage. Decide por capas: auth en cookies seguras; UX y rendimiento en localStorage. Esa elección evita bugs, reduce superficie de ataque y mejora latencia en producción.

    FAQ

    ¿Cuál es la capacidad máxima de Cookies y Local Storage?

    Las cookies suelen tener un tamaño máximo de aproximadamente 4 KB, mientras que Local Storage puede almacenar entre 5 y 10 MB por dominio.

    ¿Cómo se manejan los datos en Local Storage?

    Los datos en Local Storage se manejan a través de JavaScript con métodos como setItem para agregar datos y getItem para recuperarlos, y permanecen allí hasta que se eliminen manualmente.

    ¿Qué medidas de seguridad debo tomar con Cookies?

    Debes usar flags como HttpOnly y Secure para proteger las cookies y configurar el atributo SameSite para reducir el riesgo de CSRF.

    ¿Se pueden utilizar Cookies y Local Storage juntos?

    Sí, puedes usar ambas tecnologías para diferentes propósitos en tu aplicación, como almacenar datos de sesión en cookies y preferencias de usuario en Local Storage.