Cómo almacenar y recuperar datos en el navegador

Los navegadores web pueden utilizar el almacenamiento web para almacenar y recuperar datos localmente. El almacenamiento de datos en el navegador web es más seguro y también mejora el rendimiento del sitio web. A diferencia de las cookies, el almacenamiento web es mucho más alto y los datos no se transfieren al servidor. El almacenamiento web se basa en el protocolo y el dominio, y todas las páginas de una sola fuente pueden almacenar y recuperar la misma información.

Este artículo discutirá el procedimiento para almacenamiento y recuperando datos en el navegador. Además, se proporcionarán ejemplos relacionados con el uso de los objetos web HTML HTML de LocalStorage y SessionStorage. Entonces, comencemos!

Objetos de almacenamiento web en el navegador

El HTML proporciona dos objetos de almacenamiento web, que puede usar para almacenar y obtener los datos. "almacenamiento local"Es un tipo de almacenamiento HTML que no tiene una fecha de vencimiento, mientras que el"sesion -storage"El objeto solo almacene la información relacionada con una sola sesión, lo que significa que cerrar la pestaña del navegador actual eliminará todos los datos guardados.

Antes de usar LocalStorage y SessionStorage, asegúrese de que su navegador sea compatible con el almacenamiento HTML: su navegador:

if (typeof (almacenamiento) !== "indefinido")
// Escribir código para objetos de almacenamiento HTML
demás
// Tu navegador no es compatible

Objeto de almacenamiento web HTML de LocalStorage en el navegador

Como se mencionó anteriormente, los datos almacenados dentro del objeto LocalStorage no tienen fecha de vencimiento, y no se elimina incluso si su navegador está cerrado. Los datos almacenados se pueden recuperar al día siguiente, semana o año.

Ejemplo 1: Uso del objeto de almacenamiento web HTML de LocalStorage en el navegador

En el ejemplo dado a continuación, crearemos un "almacenamiento local"Objeto web que tiene un"Nombre: Valor" par:

Ejecute el programa anterior en su editor de código favorito o en cualquier Sandbox de codificación en línea; Sin embargo, utilizaremos el JSBIN para este propósito:

Como puede ver en la salida, hemos almacenado y recuperado con éxito los datos utilizando el "almacenamiento local"Objeto web HTML:

También puede ejecutar el siguiente código para el mismo propósito:

El ejemplo proporcionado también le mostrará la misma salida:

Si desea eliminar un elemento o entrada de su objeto LocalStorage, entonces debe llamar al "remover el artículo()"Método y pasar el"nombre"Artículo como argumento:

almacenamiento local.removeItem ("nombre");

Ejemplo 2: Uso del objeto de almacenamiento web de HTML LocalStorage en el navegador

Veamos otro ejemplo. En el programa JavaScript otorgado a continuación el "almacenamiento local"El objeto contará y almacenará la cantidad de veces que un usuario hizo clic en"Hacer clic" botón:

Hacer clic

Haga clic en el botón para verificar el valor del mostrador.

Aquí, la salida muestra un "Hacer clic" botón; Haga clic en él para verificar el valor de ButtonClickCounter:

Inicialmente, el valor de ButtonClickCounter se estableció en "0,"Y se incrementará cuando haga clic en el botón:

SessionStorage HTML Objeto de almacenamiento web en el navegador

El html "sesion -storage"El objeto funciona igual que"almacenamiento local"; Sin embargo, solo puede usarlo para almacenar y recuperar datos para la sesión actual. Tan pronto como se cierre la pestaña del navegador abierto, todos los datos almacenados se eliminarán.

Ejemplo 2: Uso del objeto de almacenamiento web de sessionStorage HTML en el navegador

El siguiente programa JavaScript almacenará y recuperará el "ButtonclickCount"Para la sesión actual. Se agrega ButtonClickCount para contar la cantidad de veces que un usuario hizo clic en el botón proporcionado:

Hacer clic

Haga clic en el botón para verificar el valor del mostrador.

Presionar el botón resaltado es recuperar los datos almacenados en el "sesion -storage" botón:

Conclusión

Los desarrolladores pueden utilizar almacenamiento local y sesion -storage Objetos web HTML para almacenar y recuperar datos en el navegador. LocalStorage Object no tiene una fecha de vencimiento, mientras que SessionStorage solo almacena la información relacionada con una sola sesión, lo que significa que cerrar la pestaña del navegador actual eliminará todos los datos guardados. Este artículo sobre el procedimiento para almacenar y recuperar datos en el navegador. Además, también se proporcionan ejemplos relacionados con el uso de objetos web HTML de SessionStorage y SessionStorage.