sessionStorage: Almacenamiento Temporal de Sesión
Aprende a usar sessionStorage para guardar datos temporales que persisten solo mientras la pestaña del navegador está abierta, ideal para formularios multi-paso y datos de sesión.
TL;DR - Resumen rápido
- sessionStorage guarda datos temporalmente mientras la pestaña está abierta
- Los datos se borran automáticamente al cerrar la pestaña o ventana
- Tiene la misma API que localStorage: setItem, getItem, removeItem, clear
- Cada pestaña tiene su propio sessionStorage aislado
- Útil para formularios multi-paso y datos temporales de sesión
Introducción al Almacenamiento de Sesión
sessionStorage es una API de almacenamiento web que permite guardar datos temporalmente en el navegador del usuario. A diferencia de localStorage, los datos en sessionStorage solo persisten mientras la pestaña o ventana del navegador permanece abierta. Al cerrar la pestaña, todos los datos se borran automáticamente, lo que lo hace ideal para información que no necesita persistir entre sesiones.
Esta característica es perfecta para escenarios como formularios multi-paso, datos de carrito de compras temporal, o cualquier información que solo necesitas durante la sesión actual del usuario. La API es idéntica a localStorage, por lo que si ya conoces localStorage, sessionStorage te será familiar.
- Los datos persisten solo mientras la pestaña está abierta
- Se borra automáticamente al cerrar la pestaña o ventana
- API idéntica a localStorage (mismo aprendizaje)
- Cada pestaña tiene su propio sessionStorage aislado
- Útil para datos temporales que no necesitan persistencia
Aislamiento por Pestaña
Cada pestaña del navegador tiene su propio sessionStorage independiente. Esto significa que los datos guardados en una pestaña no son accesibles desde otra pestaña del mismo sitio, incluso si ambas están abiertas simultáneamente.
¿Qué es sessionStorage?
sessionStorage es parte de la Web Storage API junto con localStorage. Funciona de manera muy similar, con la diferencia principal de que los datos tienen un ciclo de vida limitado a la duración de la sesión del navegador. Una "sesión" se define como el tiempo que una pestaña o ventana está abierta, incluso si el usuario navega a diferentes páginas dentro del mismo dominio.
Al igual que localStorage, sessionStorage almacena datos como pares clave-valor y solo acepta strings. Los datos no se envían automáticamente al servidor con cada petición HTTP, lo que lo hace más eficiente que las cookies para almacenamiento temporal en el cliente.
Ventajas sobre Cookies para Datos Temporales
sessionStorage ofrece mayor capacidad (5-10MB vs 4KB), API más simple, no viaja en cada petición HTTP y se limpia automáticamente al cerrar la pestaña. Es ideal para datos temporales que no necesitan persistencia entre sesiones.
Diferencias con localStorage
Aunque sessionStorage y localStorage comparten la misma API, tienen diferencias fundamentales en su comportamiento y ciclo de vida. Entender estas diferencias es crucial para elegir la herramienta correcta según tu caso de uso.
El código muestra las diferencias clave entre localStorage y sessionStorage. localStorage persiste indefinidamente hasta que se elimina manualmente, mientras que sessionStorage se borra automáticamente al cerrar la pestaña. También puedes ver que sessionStorage no comparte datos entre pestañas, mientras que localStorage sí lo hace.
- <strong>Persistencia:</strong> localStorage es permanente, sessionStorage es temporal
- <strong>Alcance:</strong> localStorage comparte entre pestañas, sessionStorage es aislado
- <strong>Limpieza:</strong> localStorage requiere eliminación manual, sessionStorage es automática
- <strong>Uso:</strong> localStorage para preferencias, sessionStorage para datos temporales
- <strong>API:</strong> Ambos usan la misma interfaz (setItem, getItem, etc.)
Métodos Básicos de sessionStorage
sessionStorage proporciona los mismos cuatro métodos que localStorage: setItem para guardar, getItem para leer, removeItem para eliminar una clave específica y clear para borrar todos los datos. La única diferencia es que estos métodos operan sobre el almacenamiento de sesión en lugar del almacenamiento persistente.
setItem - Guardar Datos
El método setItem guarda un valor asociado a una clave específica en sessionStorage. Si la clave ya existe, su valor se sobrescribe. Como con localStorage, solo acepta strings, por lo que necesitas JSON.stringify para objetos complejos.
El código muestra cómo guardar diferentes tipos de datos en sessionStorage. Los números y booleanos se convierten automáticamente a strings. Para guardar objetos complejos, es necesario usar JSON.stringify antes de almacenarlos.
Advertencia: Conversión Automática
sessionStorage siempre almacena strings. Si guardas un número como 42, se guardará como "42". Al recuperarlo, recibirás el string "42", no el número 42. Debes convertirlo explícitamente con parseInt() o parseFloat() si necesitas el valor numérico.
getItem - Leer Datos
El método getItem recupera el valor asociado a una clave específica de sessionStorage. Si la clave no existe, retorna null. Es una buena práctica siempre verificar si el resultado es null antes de usar el valor, ya que intentar acceder a propiedades de null causará un error.
Este ejemplo muestra cómo leer datos de sessionStorage de forma segura. El código verifica si el valor existe antes de usarlo, evitando errores cuando la clave no ha sido guardada previamente. También demuestra cómo convertir strings de vuelta a su tipo original cuando es necesario.
removeItem - Eliminar Datos
El método removeItem elimina una clave específica y su valor asociado de sessionStorage. Si la clave no existe, el método simplemente no hace nada sin lanzar ningún error. Esto lo hace seguro de usar incluso cuando no estás seguro de si la clave existe.
El código demuestra cómo eliminar claves específicas de sessionStorage. Después de usar removeItem, intentar leer esa clave con getItem retornará null. Este patrón es útil para limpiar datos que ya no son necesarios durante la sesión actual.
clear - Limpiar Todo
El método clear elimina todas las claves y valores almacenados en sessionStorage para el dominio actual en la pestaña actual. Esta operación es irreversible y debe usarse con precaución. Es útil cuando necesitas limpiar completamente el almacenamiento de sesión, por ejemplo, cuando un usuario completa un proceso multi-paso.
Este ejemplo muestra cómo verificar si sessionStorage tiene datos antes de limpiarlo completamente. La propiedad length indica cuántas claves están almacenadas. Después de usar clear, length será 0 y todas las claves previas habrán desaparecido.
Advertencia: Operación Destructiva
clear elimina TODOS los datos de sessionStorage para tu dominio en la pestaña actual, no solo los de tu aplicación. Si otros scripts en el mismo dominio usan sessionStorage, clear también borrará sus datos. Úsalo solo cuando estés seguro de que quieres limpiar todo el almacenamiento de sesión.
Casos de Uso Prácticos
sessionStorage es ideal para escenarios donde necesitas almacenar datos temporalmente durante la sesión del usuario, pero no necesitas que persistan entre sesiones. Estos son algunos de los casos de uso más comunes donde sessionStorage brilla.
El código muestra tres casos de uso prácticos de sessionStorage. El primero es un formulario multi-paso donde guardas el progreso del usuario entre páginas. El segundo es un carrito de compras temporal que se limpia automáticamente al cerrar la pestaña. El tercero es un estado de wizard que persiste mientras el usuario completa el proceso.
Formularios Multi-Paso
sessionStorage es perfecto para formularios multi-paso porque los datos persisten mientras el usuario navega entre los pasos, pero se limpian automáticamente si el usuario abandona el formulario cerrando la pestaña, evitando datos obsoletos en localStorage.
Limitaciones y Consideraciones
sessionStorage tiene varias limitaciones importantes que debes conocer antes de usarlo en producción. Estas limitaciones afectan cuándo y cómo deberías usar sessionStorage en tus aplicaciones, y cuándo considerar alternativas como localStorage o IndexedDB.
- <strong>Límite de tamaño:</strong> 5-10MB por dominio según el navegador
- <strong>Solo strings:</strong> Necesitas JSON para objetos y arrays
- <strong>Síncrono:</strong> Bloquea el hilo principal en operaciones pesadas
- <strong>Temporal:</strong> Los datos se pierden al cerrar la pestaña
- <strong>Aislado:</strong> No comparte datos entre pestañas del mismo dominio
No Guardes Datos Sensibles
sessionStorage no es seguro para datos sensibles como contraseñas, tokens de autenticación, información financiera o datos personales. Cualquier script en el mismo dominio puede acceder a sessionStorage, incluyendo scripts maliciosos de terceros. Usa cookies seguras (HttpOnly) para datos sensibles.
Errores Comunes
Estos son los errores más frecuentes que encontrarás al trabajar con sessionStorage, especialmente cuando estás aprendiendo o migrando código legacy. Conocer estos patrones te ayudará a evitar bugs comunes y escribir código más robusto.
Error: JSON.parse sin try-catch
Un error común es hacer JSON.parse directamente sin manejar errores. Si el string no es JSON válido, la aplicación se romperá completamente. Esto puede ocurrir si el usuario modificó sessionStorage manualmente en DevTools o si hubo un error en el guardado.
El código muestra el error común (sin try-catch) y la solución correcta. El error causa que la aplicación se rompa si el JSON es inválido. La solución usa try-catch para manejar el caso de error y retornar un valor por defecto, permitiendo que la aplicación continúe funcionando.
Error: No verificar null en getItem
Otro error frecuente es asumir que getItem siempre retornará un valor. Si la clave no existe, getItem retorna null, y intentar acceder a propiedades de null causará un TypeError. Siempre verifica que el resultado no sea null antes de usarlo.
El ejemplo muestra el error de asumir que el valor existe y la solución correcta con verificación de null. El error causa TypeError cuando la clave no existe. La solución verifica si el valor es null antes de usarlo, proporcionando un valor por defecto si es necesario.
Error: Exceder la Cuota de Almacenamiento
sessionStorage tiene un límite de 5-10MB por dominio. Si intentas guardar más datos que el límite, sessionStorage lanzará una excepción QuotaExceededError. Es importante manejar este error, especialmente en aplicaciones que guardan datos progresivamente.
El código muestra cómo capturar y manejar el error cuando se excede la cuota. El try-catch permite que la aplicación continúe funcionando incluso cuando no se pueden guardar más datos. En producción, podrías implementar una estrategia de limpieza automática de datos antiguos cuando se acerca al límite.
Resumen: sessionStorage
Conceptos principales:
- •sessionStorage almacena datos temporales en el navegador
- •Solo acepta strings, requiere JSON para objetos complejos
- •Ofrece 5-10MB de almacenamiento por dominio
- •API simple: setItem, getItem, removeItem, clear
- •Los datos se borran al cerrar la pestaña del navegador
Mejores prácticas:
- •Usa try-catch al hacer JSON.parse de datos guardados
- •Verifica null antes de usar valores de getItem
- •No guardes datos sensibles en sessionStorage
- •Maneja el error QuotaExceededError cuando guardes datos
- •Usa sessionStorage para formularios multi-paso y datos temporales