sessionStorage

Aprende a usar sessionStorage para almacenamiento temporal en el navegador

sessionStorage

sessionStorage es similar a localStorage, pero los datos solo persisten durante la sesión de la pestaña del navegador. Cuando cierras la pestaña o ventana, los datos se eliminan automáticamente.

¿Qué es sessionStorage?

sessionStorage es un almacenamiento clave-valor que:

• 📋 Almacena datos como strings
• 🕒 Vive solo en la pestaña actual
• 🚪 Se borra al cerrar la pestaña/ventana
• 🔒 Es específico del dominio
• 📏 Tiene el mismo límite que localStorage (~5-10MB)
• 🌐 Es síncrono

Vive solo en la pestaña actual; se borra al cerrar la pestaña/ventana. Perfecto para datos temporales de una sesión de navegación.

Diferencias con localStorage

Aspecto	localStorage	sessionStorage
Duración	Permanente	Solo la sesión
Alcance	Todas las pestañas del mismo dominio	Solo la pestaña actual
Persiste al recargar	✅ Sí	✅ Sí
Persiste al cerrar pestaña	✅ Sí	❌ No
Compartido entre pestañas	✅ Sí	❌ No

Métodos Principales

sessionStorage tiene exactamente la misma API que localStorage:

setItem() - Guardar Datos

const SS_USER_KEY = "demoUserSS";
const SS_EMAIL_KEY = "demoEmailSS";

const btnSsCreate = document.getElementById("ss-create");

btnSsCreate.addEventListener("click", function () {
  sessionStorage.setItem(SS_USER_KEY, "summer");
  sessionStorage.setItem(SS_EMAIL_KEY, "[e-mail]");
  console.log("[SS] creado: { user: summer, email: [e-mail] }");
});

getItem() - Leer Datos

const btnSsShow = document.getElementById("ss-show");

btnSsShow.addEventListener("click", function () {
  var user = sessionStorage.getItem(SS_USER_KEY);
  var email = sessionStorage.getItem(SS_EMAIL_KEY);
  console.log("[SS] user: " + user + ", email: " + email);
});

removeItem() - Eliminar Dato

const btnSsDelete = document.getElementById("ss-delete");

btnSsDelete.addEventListener("click", function () {
  sessionStorage.removeItem(SS_USER_KEY);
  sessionStorage.removeItem(SS_EMAIL_KEY);
  console.log("[SS] eliminado: demoUserSS/demoEmailSS borrados");
});

Actualizar Datos

Al igual que localStorage, verifica si existen datos antes de actualizar:

const btnSsUpdate = document.getElementById("ss-update");

btnSsUpdate.addEventListener("click", function () {
  var user = sessionStorage.getItem(SS_USER_KEY);
  var email = sessionStorage.getItem(SS_EMAIL_KEY);
  if (user === null && email === null) {
    console.log("[SS] Nada que actualizar. Primero crea los datos.");
    return;
  }
  sessionStorage.setItem(SS_USER_KEY, "beth");
  sessionStorage.setItem(SS_EMAIL_KEY, "[e-mail]");
  console.log("[SS] modificado: { user: beth, email: [e-mail] }");
});

Almacenar Objetos y Arrays

Igual que localStorage, usa JSON:

// Guardar objeto
const formulario = {
  paso: 2,
  datos: {
    nombre: 'Juan',
    email: '[e-mail]'
  }
};

sessionStorage.setItem('formulario', JSON.stringify(formulario));

// Leer objeto
const formularioString = sessionStorage.getItem('formulario');
if (formularioString) {
  const formulario = JSON.parse(formularioString);
  console.log('Paso actual:', formulario.paso);
}

Casos de Uso Comunes

Formularios Multi-Paso

Perfecto para guardar el progreso en formularios largos:

// Guardar progreso del formulario
function guardarProgreso(paso, datos) {
  sessionStorage.setItem('formularioPaso', paso);
  sessionStorage.setItem('formularioDatos', JSON.stringify(datos));
}

// Restaurar al recargar la página
function restaurarProgreso() {
  const paso = sessionStorage.getItem('formularioPaso');
  const datos = sessionStorage.getItem('formularioDatos');
  
  if (paso && datos) {
    mostrarPaso(parseInt(paso));
    rellenarFormulario(JSON.parse(datos));
  }
}

// Limpiar al enviar
function enviarFormulario() {
  // ... enviar datos
  sessionStorage.removeItem('formularioPaso');
  sessionStorage.removeItem('formularioDatos');
}

Estado de Navegación

Guardar el estado actual de la aplicación:

// Guardar qué tab está activa
document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', (e) => {
    const tabId = e.target.dataset.tabId;
    sessionStorage.setItem('activeTab', tabId);
  });
});

// Restaurar al recargar
window.addEventListener('DOMContentLoaded', () => {
  const activeTab = sessionStorage.getItem('activeTab');
  if (activeTab) {
    document.querySelector(`[data-tab-id="${activeTab}"]`).click();
  }
});

Datos de Sesión Temporal

Para datos que no deben persistir después de cerrar:

// Token de autenticación temporal
function iniciarSesion(token) {
  sessionStorage.setItem('sessionToken', token);
}

function obtenerToken() {
  return sessionStorage.getItem('sessionToken');
}

function cerrarSesion() {
  sessionStorage.removeItem('sessionToken');
  // Redirigir al login
}

// El token se borra automáticamente al cerrar la pestaña

Carrito de Compras Temporal

function agregarAlCarrito(producto) {
  const carrito = obtenerCarrito();
  carrito.push(producto);
  sessionStorage.setItem('carrito', JSON.stringify(carrito));
}

function obtenerCarrito() {
  const carrito = sessionStorage.getItem('carrito');
  return carrito ? JSON.parse(carrito) : [];
}

function vaciarCarrito() {
  sessionStorage.removeItem('carrito');
}

// El carrito se borra al cerrar la pestaña

Comportamiento con Pestañas

Pestañas Independientes

// En pestaña 1:
sessionStorage.setItem('mensaje', 'Hola desde pestaña 1');

// En pestaña 2 (mismo dominio):
console.log(sessionStorage.getItem('mensaje')); // null
// Cada pestaña tiene su propio sessionStorage

Duplicar Pestaña

// En pestaña original:
sessionStorage.setItem('contador', '5');

// Al duplicar la pestaña (Ctrl+Shift+T o clic derecho > Duplicar):
// La nueva pestaña COPIA el sessionStorage de la original
console.log(sessionStorage.getItem('contador')); // "5"

// Pero son independientes después:
sessionStorage.setItem('contador', '10'); // Solo en la nueva pestaña

Al duplicar una pestaña, el sessionStorage se copia, pero luego las pestañas son independientes.

Comparación Lado a Lado

localStorage

// Guardar
localStorage.setItem('tema', 'oscuro');

// Leer
const tema = localStorage.getItem('tema');

// ✅ Persiste al cerrar el navegador
// ✅ Compartido entre pestañas
// ✅ Persiste indefinidamente

Usa para:

• Preferencias del usuario
• Datos que deben persistir
• Configuraciones de la aplicación

sessionStorage

// Guardar
sessionStorage.setItem('paso', '2');

// Leer
const paso = sessionStorage.getItem('paso');

// ❌ Se borra al cerrar la pestaña
// ❌ NO compartido entre pestañas
// ✅ Persiste en recargas

Usa para:

• Estado temporal de formularios
• Datos de sesión actual
• Información que no debe persistir

Eventos de Storage

El evento storage NO se dispara para sessionStorage en otras pestañas (porque cada pestaña tiene su propio almacenamiento):

// Esto solo funciona con localStorage entre pestañas
window.addEventListener('storage', (e) => {
  console.log('Storage cambió:', e.key, e.newValue);
  // NO se dispara para sessionStorage
});

Buenas Prácticas

1. Usa sessionStorage para datos temporales

   // ✅ Bien: Datos que no deben persistir
   sessionStorage.setItem('formularioTemp', JSON.stringify(datos));
   
   // ❌ Mal: Preferencias del usuario (usa localStorage)
   sessionStorage.setItem('tema', 'oscuro');
   
2. Limpia datos cuando ya no los necesites

   function enviarFormulario(datos) {
     // Enviar datos al servidor
     fetch('/api/submit', {
       method: 'POST',
       body: JSON.stringify(datos)
     })
     .then(() => {
       // Limpiar sessionStorage después de enviar
       sessionStorage.removeItem('formularioDatos');
       sessionStorage.removeItem('formularioPaso');
     });
   }
   
3. Combina con localStorage cuando sea apropiado

   // Guardar token de sesión temporalmente
   sessionStorage.setItem('sessionToken', token);
   
   // Pero guardar preferencias permanentemente
   localStorage.setItem('preferencias', JSON.stringify(prefs));
   

Funciones Helper Reutilizables

const session = {
  get(key) {
    const item = sessionStorage.getItem(key);
    try {
      return JSON.parse(item);
    } catch {
      return item;
    }
  },
  
  set(key, value) {
    sessionStorage.setItem(key, JSON.stringify(value));
  },
  
  remove(key) {
    sessionStorage.removeItem(key);
  },
  
  clear() {
    sessionStorage.clear();
  },
  
  has(key) {
    return sessionStorage.getItem(key) !== null;
  }
};

// Uso
session.set('formulario', { paso: 2, datos: {...} });
const formulario = session.get('formulario');

if (session.has('formulario')) {
  console.log('Hay datos guardados');
}

Cuándo Usar Cada Uno

Usa localStorage

• Preferencias de usuario
• Tema (claro/oscuro)
• Configuración de idioma
• Caché de datos
• Datos que deben persistir

Usa sessionStorage

• Formularios multi-paso
• Estado de navegación temporal
• Carrito de compras temporal
• Tokens de sesión
• Datos que NO deben persistir

Próximos Pasos

localStorage

Vuelve a localStorage para comparar

Ejemplos de Storage

Ve ejemplos completos de ambos tipos de storage