LocalStorage y SessionStorage | Explicado

La API web y la API de almacenamiento web son dos de las API más útiles que son compatibles con la mayoría de los navegadores, la API de almacenamiento web demuestra dos objetos los almacenamiento local almacenamiento y el sesion -storage que nos ayudan a almacenar nuestros datos en la memoria del navegador. Ambos objetos nos permiten almacenar datos localmente, con la única diferencia que con el objeto SessionStorage, los datos se eliminan automáticamente cuando el sesional expira, mientras que con el objeto LocalStorage los datos se guardan permanentemente.

Estos objetos pueden considerarse como alternativas para las cookies y también tienen sus ventajas sobre las cookies, decir que estos objetos pueden superar las cookies por completo no es verdad. Los servidores y otras aplicaciones web pueden leer las cookies, mientras que los datos almacenados localmente en su navegador no pueden ser leídos por ningún servidor que proporcione beneficios de seguridad.

LocalStorage y SessionStorage | Sintaxis

Ambos objetos tienen funciones idénticas con sintaxis idénticas. La sintaxis para el objeto localstorage se define como

almacenamiento local.función (clave, valor);

Del mismo modo, para el objeto SessionStorage, la sintaxis se define como

sesion -storage.función (clave, valor);

Funciones proporcionadas por LocalStorage & SessionStorage

Ambos objetos de la API de almacenamiento web proporcionan 5 funciones y una variable const como:

• setItem (): para almacenar una nueva entrada en el almacenamiento local en forma de pares de valores clave
• getItem (): para obtener una entrada del almacenamiento local utilizando su clave
• Clear (): para borrar el almacenamiento local del navegador
• eliminar (): para eliminar un valor del almacenamiento local utilizando una llave
• Key (): para devolver el nombre de la clave utilizando su valor de índice
• longitud (): una variable que almacena el número de entradas en el almacenamiento local

LocalStorage y SessionStorage | Uso

Para demostrar el uso de la API de almacenamiento web, abra el navegador de su elección (Chrome en nuestro caso) y visite un sitio como www.Google.comunicarse.

Cómo crear/agregar datos en LocalStorage usando el método setItem ()

Cree una nueva entrada de datos en el almacenamiento local escribiendo la siguiente línea de código en la consola del navegador:

almacenamiento local.setItem ("nombre", "John Doe");

Si el comando se ejecuta sin ningún error, esto significa que una nueva entrada se realizó con éxito en el almacenamiento del navegador.

Para verificar esto, vaya a la pestaña "Aplicaciones" en las herramientas del desarrollador y amplíe el almacenamiento local. Debería poder ver el valor en el explorador:

Cómo acceder/obtener datos de LocalStorage utilizando el método getItem ()

Para acceder a cualquier entrada desde el almacenamiento local, puede usar un operador DOT con el objeto LocalStorage y luego ingresar la clave o usar la función getItem (). Para acceder al "nombre" que acabamos de almacenar, podemos usar:

nombre var = localstorage.Nombre;
consola.registro (nombre)

La salida es como:

O podemos usar el comando como se muestra:

consola.Log (LocalStorage.getItem ("nombre"));

La salida es como

Almacenamiento permanente del objeto LocalStorage | Verificación

Para verificar que el objeto local de almacenamiento almacene datos de forma permanente (hasta que se retira manualmente), cierre los navegadores que habían abierto previamente el enlace donde almacenó algunos datos (en nuestro caso era Google.com)

Ha terminado el apretón de manos dorado y terminó las sesiones actuales con el sitio web cerrando los navegadores, reabrir el navegador y dirigirse al mismo sitio web y luego entrar en herramientas de desarrollador> Aplicaciones> Almacenamiento local para verificar si los datos aún están allí o no :

Todos los pasos anteriores se pueden hacer con el objeto SessionStorage, pero recuerde que eliminará todos los datos cuando expire la sesión. Veamos la manifestación.

Cómo crear/agregar datos en SessionStorage usando el método setItem ()

Primero vamos a crear una nueva entrada en el sesionstorage con la siguiente línea de código:

sesion -storage.setItem ("Job", "Auditor");

La consola muestra "indefinido", lo que significa que el comando se ejecutó con éxito sin ningún error:

Podemos verificar el almacenamiento en la pestaña de almacenamiento de sesión:

Cierre los navegadores y vuelva a abrir el mismo enlace y luego vaya a las herramientas del desarrollador> Aplicaciones> Almacenamiento de sesiones, verá los siguientes resultados:

Puede ver que se eliminó la entrada, esto demuestra que el objeto SessionStorage solo almacena datos para el almacenamiento local del navegador para una sola sesión.

Conclusión

Los objetos LocalStorage y SessionStorage se utilizan para almacenar datos en el almacenamiento local del navegador y son parte de la API de almacenamiento web; Ambos objetos proporcionan 5 funciones al usuario que permite a los usuarios crear, actualizar, obtener y eliminar una entrada del almacenamiento local. La diferencia entre el objeto LocalStorage y SessionStorage es que el objeto LocalStorage almacena permanentemente los datos en un sitio web, mientras que el objeto SessionSTroage solo almacena los datos para una sesión.