Almacenamiento de sesión en JavaScript

1. Almacenamiento web frente a cookies
2. Tipos de almacenamiento web
3. el objeto sessionStorage en JavaScript
4. Agregar elementos de datos al almacenamiento de la sesión
5. Obtener el valor del elemento para una clave proporcionada
6. Eliminar elemento del almacenamiento de la sesión

El almacenamiento web es una de las características revolucionarias introducidas con la API web HTML5. Le permite almacenar datos en el lado del cliente, específicamente dentro del navegador.

Los datos se almacenan como pares clave-valor en el almacenamiento web. En el mundo de la web, también se le llama almacenamiento DOM.

Almacenamiento web frente a cookies

Como mecanismo de almacenamiento, el almacenamiento web es más similar a las cookies. El almacenamiento web le permite almacenar hasta 5 MB por protocolo y pestaña de dominio/navegador.

Por lo tanto, las páginas web de la misma fuente pueden acceder y manipular el mismo almacenamiento web. Además, el navegador puede mostrar un mensaje de advertencia si la tienda web está completamente ocupada.

Cuando se trata de cookies de la vieja escuela, estas deben enviarse con cada solicitud del servidor, lo que afecta negativamente el rendimiento. A diferencia de las cookies, el almacenamiento web no envía datos al servidor.

Por lo tanto, utiliza el espacio de la computadora local del usuario para almacenar datos de manera más rápida y segura que las cookies.

Tipos de almacenamiento web

Hay dos tipos principales de almacenamiento web disponibles con la API de almacenamiento web. Cada tipo se diferencia en función de su vida útil y alcance.

Almacenamiento de sesión

El almacenamiento de la sesión se limita a almacenar datos por sesión, por lo que si el navegador se vuelve a cargar o se cierra, los datos desaparecen para siempre.

Almacenamiento local

El almacenamiento local es ligeramente diferente del almacenamiento de la sesión durante su vida útil. Puede conservar los datos incluso si el navegador se actualiza o se cierra y se vuelve a abrir.

Por lo tanto, los datos de almacenamiento local no caducan hasta que los elimine con la API de JavaScript o limpie la memoria caché del navegador.

En esta guía, nos centraremos en la implementación del almacenamiento de sesiones y su uso.

el objeto sessionStorage en JavaScript

Normalmente, el objeto Ventana del navegador implementa el objeto WindowSessionStorage, que posee la propiedad sessionStorage. Por lo tanto, la llamada a window.sessionStorage creará una instancia del objeto web Storage como se muestra a continuación.

Puede usar la consola del navegador para probar estos ejemplos fácilmente.

Sintaxis:

window.sessionStorage

En el escenario anterior, el almacenamiento de la sesión está vacío. Por lo tanto, la longitud del objeto Almacenamiento devuelto es cero.

Como todos sabéis, el objeto ventana es un objeto global. Por tanto, podemos acceder directamente a la propiedad sessionStorage, que seguirá devolviendo un objeto Storage.

sessionStorage

Ese objeto se usa para agregar, modificar y eliminar elementos de datos del almacenamiento de la sesión.

Lo importante a recordar es que el almacenamiento de la sesión depende del protocolo de la página cargada. Por lo tanto, el almacenamiento de la sesión es diferente para la misma URL cuando se accede a través de HTTP y HTTPS.

Simplemente, creará dos espacios de almacenamiento de sesión separados para las páginas HTTP y HTTPS.

Dado que el objeto window.sessionStorage deriva del objeto Storage, hereda todos los métodos necesarios para manipular el espacio de almacenamiento de la sesión.

Agregar elementos de datos al almacenamiento de la sesión

Como se indicó anteriormente, como se muestra a continuación, podemos usar el método setItem() del objeto Storage para agregar nuevos elementos de datos al espacio de almacenamiento de la sesión.

window.sessionStorage.setItem('userVisitCount', 20);
window.sessionStorage.setItem('userBlockCount', 2);

Producción:

Los comandos anteriores deben establecer dos elementos de datos con los nombres userVisitCount y userBlockCount. Veamos cómo se ve el objeto Almacenamiento.

Puede verificar fácilmente el almacenamiento de la sesión a través de las herramientas de desarrollo del navegador. Abra las Herramientas para desarrolladores en Chrome y localice la pestaña Aplicación.

En el lado izquierdo de la ventana, puede ver la sección de almacenamiento de sesiones, como se muestra a continuación.

Obtener el valor del elemento para una clave proporcionada

Puede usar el método getItem del objeto Storage para consultar el valor de una clave de elemento específica.

window.sessionStorage.getItem('userVisitCount');

Producción:

Como era de esperar, el método getItem() devolvió 20, que es el valor del userVisitCount.

Eliminar elemento del almacenamiento de la sesión

Siguiendo el mismo patrón que setItem() y getItem(), obtuvimos el método removeItem() para eliminar elementos del almacenamiento de la sesión. Eliminemos el elemento asociado con la clave userVisitCount.

window.sessionStorage.removeItem('userVisitCount');

Producción:

Inspeccionemos de nuevo el objeto Almacenamiento.

Como puede ver, solo un elemento está disponible en el almacenamiento de la sesión y la clave userVisitCount ya no está allí.

Además, puede borrar el almacenamiento de la sesión llamando al método clear(). Esto eliminaría todas las entradas en el objeto Almacenamiento.

window.sessionStorage.clear();

Como era de esperar, todas las entradas se han eliminado del almacenamiento de la sesión. Este comando es muy útil en aplicaciones en las que necesita mantener el estado de la aplicación web y pasar datos entre páginas en la misma ventana/pestaña del navegador, como en los carritos de compras.