Tabla de contenido

Muchas veces necesitamos guardar información en el navegador del usuario: el tema claro u oscuro que eligió, un carrito de compras, o simplemente recordar que ya inició sesión. Para eso JavaScript nos ofrece dos herramientas: localStorage y sessionStorage.

¿Qué es el Web Storage?

Web Storage es una API del navegador que permite almacenar datos en formato clave-valor directamente en el dispositivo del usuario, sin necesidad de un servidor. Es mucho más simple que las cookies y tiene mayor capacidad de almacenamiento (generalmente hasta 5MB por dominio).

Existen dos mecanismos dentro del Web Storage: localStorage y sessionStorage. Ambos tienen exactamente la misma API, la diferencia está en el tiempo de vida de los datos.

localStorage: datos que persisten

Los datos guardados en localStorage permanecen aunque el usuario cierre el navegador o apague su computadora. Solo desaparecen si el usuario los elimina manualmente o si tu código los borra.

// Guardar un valor
localStorage.setItem("tema", "oscuro")

// Leer un valor
const tema = localStorage.getItem("tema")
console.log(tema) // oscuro

// Eliminar un valor
localStorage.removeItem("tema")

// Limpiar todo el localStorage
localStorage.clear()

JavaScript

sessionStorage: datos temporales

Los datos guardados en sessionStorage solo existen mientras la pestaña del navegador está abierta. En cuanto el usuario cierra la pestaña, los datos desaparecen.

// Guardar un valor de sesión
sessionStorage.setItem("paginaActual", "dashboard")

// Leer el valor
const pagina = sessionStorage.getItem("paginaActual")
console.log(pagina) // dashboard

// Eliminar cuando ya no se necesite
sessionStorage.removeItem("paginaActual")

JavaScript

Diferencias clave entre los dos

CaracterísticalocalStoragesessionStorage
DuraciónPermanenteSolo mientras la pestaña esté abierta
ScopeTodas las pestañas del mismo origenSolo la pestaña actual
Se borra al cerrar pestañaNoSí
Se comparte entre pestañasSíNo
Capacidad~5MB~5MB

Métodos disponibles

Ambos objetos comparten exactamente los mismos métodos:

localStorage.setItem("clave", "valor")   // guardar
localStorage.getItem("clave")            // obtener (null si no existe)
localStorage.removeItem("clave")         // eliminar uno
localStorage.clear()                     // eliminar todos
localStorage.length                      // número de elementos
localStorage.key(0)                      // clave en posición n

JavaScript

Guardar objetos y arrays

Una limitación importante: localStorage y sessionStorage solo pueden almacenar strings. Si intentas guardar un objeto directamente, lo convertirá a "[object Object]". La solución es usar JSON.stringify para guardar y JSON.parse para leer:

// ❌ Incorrecto
const usuario = { nombre: "8devmx", ciudad: "Cancún" }
localStorage.setItem("usuario", usuario)
console.log(localStorage.getItem("usuario")) // "[object Object]" 😱

// ✅ Correcto
localStorage.setItem("usuario", JSON.stringify(usuario))
const usuarioGuardado = JSON.parse(localStorage.getItem("usuario"))
console.log(usuarioGuardado.nombre) // 8devmx ✅

JavaScript

Lo mismo aplica para arrays:

const favoritos = ["javascript", "php", "mysql"]
localStorage.setItem("favoritos", JSON.stringify(favoritos))

const misFavoritos = JSON.parse(localStorage.getItem("favoritos"))
console.log(misFavoritos[0]) // javascript

JavaScript

¿Cuándo usar cada uno?

Usa localStorage cuando:

  • Quieras recordar preferencias del usuario (tema, idioma, tamaño de fuente)
  • Necesites guardar un carrito de compras que persista entre visitas
  • Quieras cachear datos de una API para no volver a pedirlos

Usa sessionStorage cuando:

  • Solo necesites los datos mientras el usuario navega en esa sesión
  • Quieras guardar el paso actual en un formulario multi-etapa
  • Necesites datos que no deberían compartirse entre pestañas

Un consejo importante: nunca guardes información sensible como contraseñas o tokens de acceso en Web Storage. Es accesible mediante JavaScript, por lo que puede ser vulnerable a ataques XSS.