App: Cookies vs LocalStorage

Teoría

Cookies: pares clave=valor que el navegador envía automáticamente al servidor en cada solicitud que coincida con dominio y path. Límite aprox. 4 KB por cookie (y cantidad por sitio limitada). Se pueden crear desde JS, pero las de autenticación debe fijarlas el servidor con HttpOnly, Secure y SameSite. Útiles para sesiones/login y datos que el servidor necesita en cada request.
localStorage: almacén clave–valor en el navegador, ~5 MB por origen. No viaja al servidor; solo lo lees/escribes con JS (API sincrónica). Ideal para preferencias de UI, progreso de quiz, borradores y carritos locales. Para objetos/arrays usa JSON.stringify() / JSON.parse(). No guardes secretos aquí ya que es fácil de leer en la consola del navegador.
Seguridad: no almacenes datos sensibles en localStorage. Para tokens, usa cookies seguras gestionadas por el servidor (HttpOnly, Secure y SameSite) con expiración y ámbito adecuados.
Diferencia clave: el servidor recibe las cookies automáticamente en cada solicitud; lo que está en localStorage no se envía a menos que tú lo incluyas explícitamente (p. ej., con fetch o en un formulario).
Nota: La memoria caché no participa en este proceso: Las cookies en archivos.txt y el LocalStorage en b.d. son formas de guardar datos del usuario en el navegador, mientras que la caché solo almacena archivos estáticos (imágenes, CSS, JS) para acelerar la carga de las páginas.
Las cookies guardan su información en pequeños registros de texto dentro de los archivos de configuración del navegador y se envían automáticamente al servidor en cada request, mientras que el LocalStorage almacena los datos en una base de datos interna del navegador (SQLite), permaneciendo solo en el equipo del usuario hasta que se borren manualmente o por código.

Tip: en producción usa SameSite y Secure en cookies. Primero seguro, luego bonito.

Diccionario rápido

Cookie

Dato pequeño clave=valor con atributos (expires, path, SameSite…).

LocalStorage

Almacenamiento persistente del navegador. No expira solo; lo borras tú o al limpiar caché.

HttpOnly

Atributo de cookie que evita leerla con JS. Solo la ve el servidor.

SameSite

Restringe envío cross-site: Lax, Strict o None (+ Secure).

CRUD de Cookies

Se envían al servidor; tamaño chico (~4KB)

Clave	Valor	Acciones

CRUD de LocalStorage

Solo navegador; ~5MB; no viaja al servidor

Clave	Valor	Acciones

Pruebas rápidas

Crear cookie de prueba

Crear LS de prueba

Leer cookie demo

Leer LS demo

Nota: para ver/limpiar manualmente, abre Herramientas de desarrollador → Application/Almacenamiento.

Pruebas: Talleres de almacenamiento en el navegador

Estos ejercicios prácticos presentan dos enfoques complementarios para persistir datos en el cliente: Cookies (intercambio con el servidor en cada solicitud, útiles para sesión) y localStorage (almacenamiento local clave–valor controlado por JavaScript).

✅ Comprender cuándo usar cookies vs. localStorage.
✅ Configurar expiración, alcance y consideraciones de seguridad.
✅ Leer, escribir y eliminar datos de forma controlada.