Chuck's Academy

Web Storage API in HTML5

Home / Topic / Web Storage API in HTML5 / Explorando `sessionStorage`

Explorando `sessionStorage`

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
"En este ejemplo, guardamos un valor llamado temporaryTheme en sessionStorage. A diferencia de localStorage, este dato solo estará disponible mientras la pestaña esté abierta."

Recuperar Datos de sessionStorage

javascript
"Aquí, recuperamos el valor de temporaryTheme desde sessionStorage usando el método getItem y lo mostramos en la consola."

Eliminar Datos de sessionStorage

javascript
"Este código elimina el valor de temporaryTheme en sessionStorage. Esto puede ser útil si el dato ya no es necesario antes de cerrar la pestaña."

Limpiar Todo el Contenido de sessionStorage

javascript
"Este método clear elimina todos los datos almacenados en sessionStorage, vaciando todos los pares clave-valor almacenados temporalmente."

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
"Este ejemplo guarda el valor del campo de texto email en sessionStorage cada vez que el usuario escribe algo. Si la página se recarga, el valor guardado se restablece en el campo de texto."

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
"En este ejemplo, usamos sessionStorage para almacenar el paso actual de un flujo de registro. Esto ayuda a recordar en qué paso estaba el usuario en caso de recargar la página."

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.

Back to previous chapter
Mark as read and continue
Ask me anything