Explica la diferencia entre cookies, sessionStorage y…

Cookies, sessionStorage y localStorage son mecanismos de almacenamiento web que difieren en propósito, duración y volumen de datos almacenados.

Cookies: Pequeños fragmentos de datos enviados por el servidor web y almacenados en el navegador del usuario. Se envían con cada solicitud posterior al mismo servidor. Se utilizan para autenticación, almacenamiento de preferencias del usuario, seguimiento del estado del carrito de compras.
- Duración: Establecida al crearla (puede ser de sesión o con una fecha de expiración específica).
- Volumen: Limitado, generalmente unos pocos kilobytes (alrededor de 4 KB).
sessionStorage: Almacena datos solo para una sesión del navegador (pestaña o ventana abierta). Los datos se eliminan al cerrar la pestaña o ventana.
- Duración: Hasta que se cierre la pestaña o ventana del navegador.
- Volumen: Mucho mayor que las cookies (generalmente varios megabytes).
localStorage: Almacena datos sin fecha de vencimiento, hasta que sean eliminados explícitamente por el usuario o mediante un script. Disponible en todas las pestañas y ventanas del mismo dominio.
- Duración: Permanente (hasta que se elimine explícitamente).
- Volumen: Mucho mayor que las cookies (generalmente varios megabytes).

Aquí una comparación breve:

Mecanismo	Duración	Disponibilidad	Enviado al servidor	Volumen (típico)	Propósito
Cookies	De sesión o con expiración	A través de encabezados HTTP	Sí	~4 KB	Autenticación, seguimiento, preferencias
sessionStorage	Hasta cerrar la pestaña/ventana	A través de API JS	No	~5-10 MB	Almacenamiento temporal de datos de sesión
localStorage	Permanente (hasta eliminar)	A través de API JS	No	~5-10 MB	Almacenamiento de datos a largo plazo

Ejemplos de uso con API JavaScript:

// Cookies (acceso mediante document.cookie, requiere análisis y serialización manual)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');

// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Limpia todos los datos en localStorage

Explica la diferencia entre cookies, sessionStorage y localStorage.