Almacenamiento local usando JavaScript

JavaScript | Almacenamiento local: Aquí, vamos a aprender sobre almacenamiento local en JavaScript, cómo almacenar, recuperar, actualizar y borrar de la memoria local ?

Hasta ahora, hemos aprendido básicamente JavaScript para avanzar con el HTML y el uso de todos estos conocimientos hicimos una tarea pendiente aplicación web. Si nos fijamos bien a la aplicación web, que nunca añadido ningún mecanismo de almacenamiento a ella, y debido a que cualquier tarea completada, se elimina o agregados recientemente no pueden ser retenidos próxima vez que vuelven a visitar esa aplicación web. Entonces, ¿qué podemos hacer uso de una base de datos o el almacenamiento y en este artículo, vamos a aprender acerca de la almacenamiento local .

Para demostrar la almacenamiento local vamos a construir un archivo HTML index.html y otro un archivo JavaScript localStorage.js .

Déjenos comenzó con nuestra index.html :

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Your reading this HTML on IncludeHelp</p>
<script src="localStorage.js"></script>
</body>
</html>

Este simple HTML sólo se utiliza para vincular nuestra JavaScript para que nada hay mucho que explicar * guiño *, pero aún así, es curioso que recomiendo la visita DoM entendimiento con JS .

Ahora, antes de sumergirse en el almacenamiento local con JS, vamos a entender un poco, lo que es el almacenamiento local, y donde se puede encontrar.

En el momento de escribir este artículo, he utilizado Google Chrome (en diferentes navegadores, podría ser diferente) y en ella, se puede ver el almacenamiento local en Aplicaciones y almacenamiento local de entonces.

Local Storage using JavaScript - 4

punto a destacar aquí es que almacena los datos sólo en forma de clave y valor, que es class todos los valores almacenamos hay class única ella. Podemos recuperar cualquier valor usando sólo su llave.

Ahora, vamos a ver nuestros localStorage.js :

localStorage.setItem('student', 'Ravi')
localStorage.setItem('task','read an Article on IncludeHElp')
localStorage.setItem('QnAforum','visit ask.includehelp.com for getting help with your programming queries')
console.log(localStorage.getItem('student')) //Output snap 1
localStorage.setItem('student','Ravi Kumar')
localStorage.removeItem('student') //line 1
console.log(localStorage.getItem('student'));
localStorage.setItem('student','Ravi Kumar')
localStorage.clear() //line 2
console.log(localStorage.getItem('student')); //output snap 2

salida

Local Storage using JavaScript - 5

Explicación:

En este código JavaScript, hemos añadido artículos en el almacenamiento local utilizando localStorage.setItem (clave, valor) , este setItem () método aceptan dos parámetros de una clave y otro valor de su tanto en formato de cadena.

Ahora para recuperar esos valores desde el almacenamiento local que va a utilizar localStorage.getItem (clave) , for getItem () método que será sólo pasan una sola tecla y va a recuperar los valores de esa tecla de nuevo clave pasará como una cadena.

En for que pueda necesitar para actualizar una clave existente que simplemente usamos setItem () método con la misma clave, pero con el valor actualizado.

de nuevo para eliminar cualquier par clave-valor que utilizamos localStorage.removeItem ( ‘llave’) , y se eliminará ese par clave-valor particular. Pero si quisiéramos borrar todo el almacenamiento usaremos localStorage.clear () , sin pasar ningún parámetro y se borrará todo lo posible el almacenamiento local.

Como hemos visto que para almacenar cualquier valor de par de claves dentro de un almacenamiento local como una cadena, ya que sólo se puede utilizar una llave con un solo valor, entonces, ¿cómo puedo almacenar múltiples valores, como si en el código I anterior como a añadir algunos más estudiantes, pero clave estudiante ya se utiliza. Así que una manera de abordar esto es el uso de objetos o de matriz, pero una vez más las necesidades de valor a un array, class ello se utilizan JSON.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *