Introducción a sessionStorage

por

En este artículos vamos a realizar una introducción completa a sessionStorage en JavaScript: una de las formas de guardar información en la web. Este artículo forma parte de la serie Session, Cookie y Storage: tecnologías que permiten a los sitios web recordar preferencias del usuario, el estado de la sesión o datos importantes mientras navegas. En esta introducción, JavaScript nos ofrece la API Web Storage, compuesta por localStorage y sessionStorage.

¿Qué es sessionStorage?

sessionStorage es un objeto del navegador que permite almacenar información en pares clave–valor de forma muy similar a localStorage, pero con una diferencia clave:

  • Los datos se eliminan automáticamente cuando se cierra la pestaña o ventana del navegador.
  • Cada pestaña tiene su propio sessionStorage, por lo que abrir la misma web en dos pestañas distintas genera almacenamientos independientes.
  • sessionStorage, no envía datos al servidor en cada petición (a diferencia de las cookies).

Introducción a los métodos sessionStorage

En esta introducción a sessionStorage veremos que la API es muy sencilla, ya que funciona como un almacén de clave–valor. Las claves y valores siempre se guardan como strings. Estos son algunos ejemplos de uso.

Podemos guardar datos en sessionStorage con sessionStorage.setItem();

// Guardar datos
sessionStorage.setItem("usuario", "Juan");
sessionStorage.setItem("idioma", "es");

Si queremos recuperar los datos guardados en sessionStorage usaremos sessionStorage.getItem();

// Obtener datos
let usuario = sessionStorage.getItem("usuario");
console.log(usuario); // "Juan"

Para eliminar los datos guardados en sessionStorage usamos sessionStorage.removeItem();

// Eliminar un elemento específico
sessionStorage.removeItem("idioma");

Podemos limpiar todo el contenido de sessionStorage con sessionStorage.clear();

// Eliminar todos los elementos
sessionStorage.clear();

Guardar objetos en sessionStorage

En sessionStorage los valores también se guardan como strings, por lo que necesitamos JSON para almacenar objetos y arrays.

// Guardar un objeto
let carrito = { producto: "Camisa", cantidad: 2 };
sessionStorage.setItem("carrito", JSON.stringify(carrito));

// Recuperar el objeto
let datosCarrito = JSON.parse(sessionStorage.getItem("carrito"));
console.log(datosCarrito.producto); // "Camisa"

Casos de uso comunes

Introducción a sessionStorage

En esta introducción a sessionStorage en JavaScript, hemos visto que se trata de una herramienta ideal para almacenar datos temporales durante la sesión del usuario. Es perfecto cuando necesitamos conservar información mientras el usuario navega dentro de la misma pestaña, pero queremos que desaparezca al cerrarla. Algunos ejemplos habituales de sessionStorage son:

  • Datos temporales en formularios: mantener la información mientras el usuario navega por varias páginas, pero borrarla al cerrar la pestaña.
  • Aplicaciones de una sola sesión: guardar configuraciones que solo deben durar hasta que se cierre la pestaña (p. ej., filtros de búsqueda).
  • Datos sensibles de corta duración: tokens de acceso temporales que no deberían sobrevivir a una nueva sesión.
  • Evitar duplicados entre pestañas: como cada pestaña tiene su propio sessionStorage, es útil cuando no queremos compartir datos entre sesiones abiertas.

Sin embargo, aunque sessionStorage es muy útil, también tiene algunas limitaciones importantes:

  • Capacidad limitada (~5 MB por dominio).
  • No apto para datos críticos (sin encriptación).
  • No persiste al cerrar la pestaña.
  • Síncrono: puede bloquear el hilo principal en operaciones muy grandes.

Después de esta breve introducción a sessionStorage, observamos que a diferencia de localStorage, no guarda datos de forma permanente, lo que lo convierte en una solución más segura para información delicada y en una opción eficiente para mejorar la experiencia de usuario en sesiones temporales.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario