¿Cuáles son las principales diferencias entre LocalStorage, SessionStorage y Cookies en el almacenamiento de datos en el navegador?

LocalStorage, SessionStorage y Cookies son tres formas de almacenar datos en el navegador, pero difieren en volumen, tiempo de vida y ámbito de visibilidad:

• LocalStorage:

  • Almacena datos sin fecha de caducidad, hasta que el usuario los borre manualmente.
  • Los datos están disponibles en todas las pestañas y ventanas de un mismo dominio.
  • El volumen suele ser de unos 5-10 MB.
  • No se envía al servidor en cada solicitud.

• SessionStorage:

  • Los datos solo viven en la sesión actual (mientras la pestaña del navegador esté abierta).
  • Los datos no están disponibles en otras pestañas o ventanas.
  • El volumen es similar al de LocalStorage.
  • No se envía al servidor.

• Cookies:

  • Tienen un volumen limitado (alrededor de 4 KB).
  • Pueden tener una fecha de caducidad, tras la cual se eliminan.
  • Se envían al servidor en cada solicitud HTTP al dominio correspondiente.
  • Se usan para autenticación, seguimiento de sesiones, etc.

Ejemplo de uso de LocalStorage:

// Guardar datos
localStorage.setItem('username', 'user123');

// Obtener datos
const user = localStorage.getItem('username');