📖 Teoría
🍪 Cookies
- Pares clave=valor almacenados en el navegador.
- Se envían automáticamente al servidor en cada request HTTP.
- Capacidad: ~4 KB por cookie.
- Pueden tener atributos de seguridad: HttpOnly, Secure, SameSite.
- Pueden tener fecha de expiración (expires / max-age).
- Útiles para sesiones, autenticación y datos que el servidor necesita.
💾 localStorage
- Almacén clave-valor en el navegador, solo accesible con JS.
- No viaja al servidor; permanece en el cliente.
- Capacidad: ~5 MB por origen.
- Persiste aunque se cierre el navegador (sin expiración automática).
- Para objetos/arrays usa JSON.stringify() / JSON.parse().
- Ideal para preferencias de UI, progreso, borradores, carritos.
⚠️ Seguridad: No guardes tokens ni contraseñas en localStorage — es vulnerable a XSS. Para autenticación, usa cookies con HttpOnly + Secure + SameSite
gestionadas desde el servidor. localStorage es ideal solo para datos no sensibles del cliente.
⚖️ Tabla Comparativa
| Característica | 💾 localStorage | ⏱ sessionStorage | |
|---|---|---|---|
| Capacidad | ~4 KB por cookie | ~5 MB por origen | ~5 MB por origen |
| Viaja al servidor | ✅ Sí, automáticamente | ❌ No | ❌ No |
| Acceso JS | document.cookie | localStorage.getItem() | sessionStorage.getItem() |
| Expiración | Configurable (expires) | Nunca (manual) | Al cerrar la pestaña |
| Persistencia | Hasta expiración | Indefinida | Solo la sesión activa |
| Seguridad | HttpOnly, Secure, SameSite | Visible a todo JS del origen | Visible a todo JS del origen |
| Uso ideal | Sesiones, auth, servidor | Preferencias, datos locales | Datos temporales de pestaña |
| Comparte entre pestañas | ✅ Sí | ✅ Sí | ❌ No |
📚 Diccionario de términos
Cookie
Par clave=valor con atributos que el
navegador envía automáticamente al servidor en cada request.
localStorage
Almacén persistente del
navegador (~5 MB). No expira; solo lo borras tú o el usuario.
sessionStorage
Igual que localStorage pero
se borra automáticamente al cerrar la pestaña.
HttpOnly
Atributo que impide a JavaScript
leer la cookie. Solo el servidor puede acceder a ella.
Secure
Atributo que limita el envío de la
cookie solo a conexiones HTTPS.
SameSite
Controla si la cookie se envía en
solicitudes cross-site. Valores: Strict, Lax, None.
expires / max-age
Atributos que definen
cuándo expira una cookie. Sin ellos, es cookie de sesión.
JSON.stringify()
Convierte un objeto/array a
texto JSON para poder guardarlo en localStorage.
JSON.parse()
Convierte texto JSON de regreso
a objeto/array al leerlo de localStorage.
XSS
Cross-Site Scripting: ataque donde
código malicioso puede leer localStorage o cookies sin HttpOnly.
CSRF
Cross-Site Request Forgery: ataque que
se aprovecha del envío automático de cookies sin SameSite.
Origen (Origin)
Combinación de protocolo +
dominio + puerto. localStorage es aislado por origen.
🎬 Videos en español
Cookies en JavaScript — Crear, leer y eliminar
localStorage — Guardar datos en el navegador con JS
Cookies vs localStorage vs sessionStorage — Diferencias
Seguridad: HttpOnly, Secure y SameSite en Cookies
💾 CRUD de localStorage
Solo navegador · ~5 MB · no viaja al servidor| Clave | Valor | Acciones |
|---|
⚡ Pruebas rápidas
Crear cookie de prueba
Crear localStorage de prueba
Leer cookie demo
Leer localStorage demo
💡 Abre DevTools → Application → Storage para inspeccionar cookies y localStorage directamente.
🛠️ Talleres prácticos
Pon a prueba lo aprendido con ejercicios prácticos de Cookies y localStorage.
🧠 Cuestionario
10 preguntas aleatorias del banco de 50. Calificación de 0 a 100.