En este capítulo, profundizaremos en sessionStorage, una de las opciones de almacenamiento en HTML que permite guardar datos temporalmente en el navegador. A diferencia de localStorage, los datos almacenados en sessionStorage solo persisten durante la sesión de navegación actual y se eliminan automáticamente cuando se cierra la pestaña o ventana.

¿Qué es sessionStorage?

sessionStorage es una API de almacenamiento en HTML que permite almacenar datos en pares clave-valor en el navegador del usuario, de manera similar a localStorage, pero con la diferencia clave de que los datos solo permanecen durante la sesión activa. Esto significa que los datos se eliminan automáticamente cuando el usuario cierra la pestaña o la ventana donde se encuentra la aplicación.

Características Principales de sessionStorage

• Persistencia Temporal: Los datos de sessionStorage se mantienen mientras la pestaña o ventana esté abierta. Se eliminan automáticamente al cerrar la sesión de navegación.
• Alcance de Pestaña: Los datos de sessionStorage son específicos de cada pestaña. Si el usuario abre una nueva pestaña para el mismo sitio web, sessionStorage estará vacío en la nueva pestaña.
• Capacidad de Almacenamiento: Aunque el límite de almacenamiento varía según el navegador, en general es similar al de localStorage, con una capacidad de aproximadamente 5-10 MB.

Métodos Básicos de sessionStorage

sessionStorage utiliza los mismos métodos básicos que localStorage, lo que hace que sea fácil de aprender y utilizar si ya se tiene conocimiento de localStorage.

1. setItem(key, value): Guarda un par clave-valor en sessionStorage.
2. getItem(key): Recupera el valor almacenado asociado a una clave específica en sessionStorage.
3. removeItem(key): Elimina un par clave-valor de sessionStorage.
4. clear(): Borra todos los datos almacenados en sessionStorage.

Ejemplos de Uso de sessionStorage

Guardar Datos en sessionStorage

javascript

Recuperar Datos de sessionStorage

javascript

Eliminar Datos de sessionStorage

javascript

Limpiar Todo el Contenido de sessionStorage

javascript

Usos Comunes de sessionStorage

Dado que sessionStorage es temporal y específico de la pestaña o ventana, es ideal para almacenar datos que solo son necesarios mientras el usuario está navegando en esa instancia particular del sitio web. Algunos de los usos comunes incluyen:

Almacenamiento de Información Temporal en Formularios

Es común utilizar sessionStorage para almacenar los datos ingresados en formularios que el usuario aún no ha enviado. Esto ayuda a preservar la información en caso de una recarga accidental de la página.

javascript

Control de Navegación en una Sola Sesión

En aplicaciones que manejan flujos de navegación en varias etapas, sessionStorage puede ayudar a controlar el progreso del usuario sin la necesidad de almacenar información permanentemente.

javascript

Buenas Prácticas y Consideraciones de Seguridad para sessionStorage

Al igual que localStorage, sessionStorage tiene limitaciones y aspectos de seguridad a considerar:

• No Almacenar Datos Sensibles: sessionStorage es susceptible a ataques de Cross-Site Scripting (XSS). Evita almacenar información sensible como contraseñas o tokens de acceso en sessionStorage.
• Limpieza de Datos No Necesarios: Es importante eliminar los datos de sessionStorage que ya no son relevantes para la sesión actual, para evitar acumulación innecesaria de datos temporales.
• Uso Adecuado en Aplicaciones Complejas: En aplicaciones que requieren el uso de datos temporales en diferentes pestañas, considera si sessionStorage es la mejor opción, ya que sus datos no se comparten entre pestañas.

Conclusión

En este capítulo, hemos aprendido cómo sessionStorage proporciona una solución eficiente para almacenar datos de manera temporal en el navegador. Con sus métodos sencillos y su alcance específico de sesión, sessionStorage es útil para información temporal que no necesita persistir más allá de la sesión actual. En el próximo capítulo, nos centraremos en la administración de datos utilizando el API de almacenamiento, con un enfoque en la manipulación y control de datos en aplicaciones web.