Almacenamiento web: Cómo usar localStorage y sessionStorage en proyectos JavaScript

El almacenamiento web es una herramienta clave en el desarrollo de aplicaciones modernas, especialmente cuando trabajamos con JavaScript. Nos permite guardar datos en el navegador de los usuarios de forma local, ya sea durante toda la sesión o de manera permanente. En este artículo, vamos a explicar de manera sencilla cómo usar localStorage y sessionStorage, dos de las principales API de almacenamiento en la web.

¿Qué es el almacenamiento web?

El almacenamiento web es un método que nos permite guardar datos clave directamente en el navegador del usuario. En lugar de tener que enviar cada dato al servidor, podemos almacenar información localmente, lo que mejora el rendimiento de la aplicación y ofrece una mejor experiencia de usuario.

Tipos de almacenamiento web

En JavaScript, tenemos dos formas principales de almacenamiento: localStorage y sessionStorage. Ambos tienen características en común, pero también diferencias importantes que determinan cuándo es más apropiado usar uno u otro.

LocalStorage: Almacenamiento persistente

¿Qué es localStorage?

localStorage es una API que nos permite guardar datos que se mantendrán en el navegador incluso después de que el usuario cierre la ventana o pestaña. Estos datos son persistentes y se conservan hasta que el usuario los elimine manualmente o se haga mediante código JavaScript.

Características principales de localStorage

  • Capacidad: Puede almacenar hasta 5-10 MB de datos, dependiendo del navegador.
  • Persistencia: Los datos guardados no tienen fecha de caducidad, lo que significa que estarán disponibles cada vez que el usuario visite el sitio, incluso si pasa mucho tiempo entre visitas.
  • Almacenamiento clave-valor: Al igual que un diccionario, almacena los datos en pares de clave-valor, donde podemos guardar cualquier tipo de dato en forma de string.
				
					// Guardar un dato en localStorage
localStorage.setItem('usuario', 'Juan');
// Recuperar el dato
let usuario = localStorage.getItem('usuario');
console.log(usuario);  // Output: Juan
// Eliminar un dato
localStorage.removeItem('usuario');

Casos de uso de localStorage

Algunos ejemplos comunes donde podemos usar localStorage son:

  • Guardar preferencias del usuario, como el tema oscuro o claro de una aplicación.
  • Mantener la sesión de un usuario iniciada a largo plazo.
  • Almacenar datos temporales que se utilizan en diferentes secciones de una aplicación.

SessionStorage: Almacenamiento temporal

¿Qué es sessionStorage?

Por otro lado, sessionStorage es una API que permite guardar datos temporalmente. A diferencia de localStorage, los datos en sessionStorage se eliminan cuando el usuario cierra la pestaña o el navegador.

Características principales de sessionStorage

  • Duración limitada: Los datos solo están disponibles durante la sesión del navegador. Al cerrar la pestaña, los datos se eliminan automáticamente.
  • Capacidad: Generalmente tiene una capacidad similar a la de localStorage (5-10 MB).
  • Almacenamiento clave-valor: Al igual que localStorage, se utiliza el formato de clave-valor para almacenar los datos.
				
					// Guardar un dato en sessionStorage
sessionStorage.setItem('estado', 'conectado');
// Recuperar el dato
let estado = sessionStorage.getItem('estado');
console.log(estado);  // Output: conectado
// Eliminar un dato
sessionStorage.removeItem('estado');

Casos de uso de sessionStorage

El sessionStorage es ideal cuando se necesita almacenar datos temporalmente durante la duración de una sesión. Algunos ejemplos de uso son:

  • Guardar datos que solo son relevantes mientras el usuario esté en una pestaña específica, como un carrito de compras.
  • Almacenar información temporal de formularios o procesos multistep.

Comparativa entre localStorage y sessionStorage

Característica localStorage sessionStorage

Persistencia

Permanente hasta que se elimine
Solo durante la sesión del navegador

Capacidad

5-10 MB
5-10 MB

Datos compartidos

Entre todas las pestañas del mismo origen
Solo en la pestaña donde se creó

Ambas opciones son muy útiles dependiendo del caso de uso y la necesidad de persistencia de los datos.

FAQs (Preguntas Frecuentes)

1. ¿Es seguro usar localStorage para almacenar información sensible?

No, localStorage no es seguro para almacenar información confidencial como contraseñas o tokens de acceso. Es accesible desde cualquier script en la página, lo que lo hace vulnerable a ataques de cross-site scripting (XSS).

2. ¿Cuánto tiempo se almacenan los datos en localStorage?

Los datos en localStorage se guardan indefinidamente hasta que el usuario los elimine manualmente o el código de la aplicación los borre.

3. ¿Puedo almacenar objetos en localStorage o sessionStorage?

No directamente. Tanto localStorage como sessionStorage solo aceptan strings como valores, por lo que debes convertir cualquier objeto a JSON antes de guardarlo.

				
					// Convertir un objeto a string JSON
let usuario = { nombre: 'Juan', edad: 30 };
localStorage.setItem('usuario', JSON.stringify(usuario));
// Recuperar el objeto
let usuarioGuardado = JSON.parse(localStorage.getItem('usuario'));
console.log(usuarioGuardado.nombre);  // Output: Juan

Conclusión

Tanto localStorage como sessionStorage son herramientas esenciales para mejorar la experiencia de usuario en aplicaciones web. La clave está en saber cuándo usar cada una. Mientras que localStorage es ideal para almacenar datos que deben persistir más allá de una sesión, sessionStorage es perfecto para datos temporales que solo deben existir mientras el usuario esté navegando. Como desarrolladores, es nuestra responsabilidad asegurarnos de que los datos se gestionen de manera segura y eficiente, aprovechando al máximo las capacidades de almacenamiento que nos ofrecen los navegadores modernos.

Facebook
Twitter
LinkedIn

Nuevas/ publicaciones

ir al blog

Nuevas/ publicaciones