Duda de frontend: ¿Cookies, localStorage o sessionStorage?

Puzzles

Tengo que guardar una pequeña cantidad de datos en el navegador del usuario y no tengo claro qué usar. Veo tres opciones: cookies, localStorage y sessionStorage.

¿Alguien me puede explicar de forma sencilla cuál es la diferencia y cuándo debería usar cada una? ¡Gracias!

Cars

Aquí un resumen rápido:

Cookies: Son pequeños trozos de datos que se envían con cada petición al servidor. Úsalas para cosas relacionadas con la sesión o la autenticación que el servidor necesita saber. Tienen fecha de caducidad.
localStorage: Es un almacén de clave-valor que persiste para siempre (o hasta que el usuario lo borra). Perfecto para guardar preferencias del usuario (como el modo oscuro) que quieres que se recuerden entre visitas.
sessionStorage: Igual que localStorage, pero se borra automáticamente cuando se cierra la pestaña del navegador. Ideal para guardar datos temporales de una sesión específica.

Sustainable

Exacto. Una regla fácil: si el servidor necesita saberlo, usa una cookie. Si quieres que el usuario lo recuerde para siempre, localStorage. Si solo importa mientras tiene la pestaña abierta, sessionStorage.

Puzzles

¡Qué explicación tan clara! Ahora sí entiendo perfectamente cuándo usar cada uno. ¡Muchas gracias a los dos!