localStorage y sessionStorage

Los navegadores modernos ofrecen mecanismos para almacenar datos del lado del cliente sin necesidad de bases de datos o cookies tradicionales.
Dentro de estas soluciones se encuentra la Web Storage API, que incluye dos interfaces principales:

• localStorage
• sessionStorage

Ambas permiten almacenar pares clave–valor de forma persistente o temporal, dependiendo del caso de uso.

¿Qué es Web Storage API?

La Web Storage API permite almacenar información en el navegador del usuario de forma simple y sincrónica.

Características principales:

• Almacenamiento en pares clave–valor
• Solo admite strings
• Acceso mediante JavaScript
• No se envía automáticamente al servidor
• Capacidad aproximada de 5MB por dominio

Las dos implementaciones son:

• localStorage: persistente
• sessionStorage: dependiente de la sesión

¿Qué es localStorage?

localStorage almacena datos de forma persistente.
La información se mantiene incluso si el usuario:

• Cierra el navegador
• Reinicia el sistema
• Vuelve días después

Los datos solo se eliminan si:

• El usuario limpia el almacenamiento
• Se elimina explícitamente con JavaScript

Uso básico

localStorage.setItem("theme", "dark");

const theme = localStorage.getItem("theme");

localStorage.removeItem("theme");

localStorage.clear();

Ejemplo práctico

Guardar preferencias del usuario:

function saveTheme(theme) {
  localStorage.setItem("theme", theme);
}

function loadTheme() {
  return localStorage.getItem("theme") || "light";
}

¿Qué es sessionStorage?

sessionStorage almacena datos solo durante la sesión actual del navegador.

La sesión termina cuando:

• Se cierra la pestaña
• Se cierra la ventana

Características clave:

• Cada pestaña tiene su propio sessionStorage
• No se comparte entre pestañas
• Ideal para estados temporales

---

Uso básico

sessionStorage.setItem("step", "2");

const step = sessionStorage.getItem("step");

sessionStorage.removeItem("step");

sessionStorage.clear();

Ejemplo práctico

Guardar progreso temporal de un formulario:

function saveStep(step) {
  sessionStorage.setItem("formStep", step);
}

function loadStep() {
  return sessionStorage.getItem("formStep");
}

Diferencias entre localStorage y sessionStorage

Característica	localStorage	sessionStorage
Persistencia	Permanente	Solo sesión
Cierre de pestaña	No borra datos	Borra datos
Compartido entre pestañas	Sí	No
Capacidad	~5MB	~5MB
Uso típico	Preferencias, caché	Estados temporales

Almacenamiento de objetos

Web Storage solo admite strings. Para almacenar objetos es necesario usar JSON.

Guardar objeto

const user = {
  id: 1,
  name: "Marco",
  role: "admin"
};

localStorage.setItem("user", JSON.stringify(user));

Leer objeto

const user = JSON.parse(localStorage.getItem("user"));

Eventos de sincronización (storage)

Cuando localStorage cambia en una pestaña, otras pestañas del mismo dominio reciben el evento storage.

window.addEventListener("storage", (event) => {
  console.log(event.key);
  console.log(event.newValue);
});

Notas importantes:

• No se dispara en la misma pestaña
• Solo funciona con localStorage
• Útil para sincronizar sesiones

Limitaciones importantes

1. Sincrónico

Todas las operaciones bloquean el hilo principal:

localStorage.setItem("bigData", hugeString); // puede causar jank

No es recomendable para grandes volúmenes de datos.

2. Seguridad

Nunca almacenar:

• Tokens JWT
• Contraseñas
• Datos sensibles

localStorage es accesible por cualquier script que se ejecute en la página, lo que lo hace vulnerable a ataques XSS.

3. No reemplaza una base de datos

Web Storage es útil para:

• Caché
• Estado UI
• Preferencias

No para:

• Datos críticos
• Información confidencial
• Lógica de negocio

Buenas prácticas

• Usar prefijos de clave:

app.theme
app.user.settings

• Validar datos al leer
• Manejar errores de JSON.parse
• Limpiar datos obsoletos
• No abusar del almacenamiento

Ejemplo seguro:

function getJSON(key) {
  try {
    return JSON.parse(localStorage.getItem(key));
  } catch {
    return null;
  }
}

¿Cuándo usar cada uno?

Usa localStorage cuando:

• Necesitas persistencia
• Guardas preferencias
• Implementas caché simple

Usa sessionStorage cuando:

• El estado es temporal
• Depende de una pestaña
• No debe persistir

Soporte y más recursos

Window.localStorage

Navegador	Soporte	Versión
chrome	Si	4
firefox	Si	3.5
safari	Si	4
edge	Si	12
ie	Si	8

Window.sessionStorage

Navegador	Soporte	Versión
chrome	Si	4
firefox	Si	2
safari	Si	4
edge	Si	12

• MDN Web Docs – Web Storage API
• OWASP Client-Side Storage Guidelines