Explica la diferencia entre cookies, sessionStorage y localStorage.

Mecanismo	Tamaño (aproximado)	Vida útil	Acceso	Se transmite al servidor	Uso
Cookies	4 KB	Fecha de caducidad establecida por el servidor o navegador	Documento actual y subdominios (según configuración)	En cada solicitud HTTP	Autenticación, seguimiento, configuraciones personalizadas del usuario
localStorage	5-10 MB	Indefinido (mientras el usuario no borre)	Solo el origen actual (protocolo, dominio, puerto)	No	Almacenamiento de configuraciones del usuario, datos del estado de la aplicación
sessionStorage	5-10 MB	Hasta cerrar la pestaña/ventana del navegador	Solo el origen actual (protocolo, dominio, puerto)	No	Almacenamiento de datos dentro de una sola sesión del usuario

Cookies:

• Se envían con cada solicitud HTTP al servidor, lo que puede aumentar el tráfico.
• Función principal: identificación del usuario (cookies de sesión), recordar preferencias, seguimiento de acciones del usuario.
• Disponibles tanto en el lado del cliente (JavaScript) como en el servidor.
• Pueden estar limitadas por dominio y ruta.
• Se consideran menos seguras para almacenar datos sensibles debido a su envío automático al servidor.

localStorage:

• Los datos se almacenan localmente en el navegador del usuario.
• Se usa para almacenamiento persistente de datos que no necesitan enviarse al servidor en cada solicitud.
• Tiene una API sencilla en JavaScript.
• Los datos se almacenan en pares clave-valor.
• No accesible desde otros orígenes.

// Establecer valor
localStorage.setItem('username', 'john.doe');

// Obtener valor
let username = localStorage.getItem('username');

// Eliminar valor
localStorage.removeItem('username');

// Limpiar todo localStorage
localStorage.clear();

sessionStorage:

• Similar a localStorage, pero los datos solo se almacenan hasta cerrar la pestaña o ventana del navegador.
• Ideal para almacenamiento temporal de datos relacionados con la sesión actual del usuario (por ejemplo, datos de formularios, carrito de compras).
• También tiene una API sencilla en JavaScript, similar a localStorage.
• Los datos solo están disponibles en el origen actual.

// Establecer valor
sessionStorage.setItem('sessionId', 'abc123');

// Obtener valor
let sessionId = sessionStorage.getItem('sessionId');

// Eliminar valor
sessionStorage.removeItem('sessionId');

// Limpiar todo sessionStorage
sessionStorage.clear();