El mecanismo localStorage proporciona un tipo de objeto de almacenamiento web que le permite almacenar y recuperar datos en el navegador. Puede almacenar y acceder a los datos sin vencimiento; los datos estarán disponibles incluso después de que un visitante cierre su sitio.
Normalmente accederá a localStorage usando JavaScript. Con una pequeña cantidad de código, puede crear un proyecto de muestra, como un contador de puntuación. Esto le mostrará cómo puede almacenar y acceder a datos persistentes usando solo el código del lado del cliente.
¿Qué es el almacenamiento local en JavaScript?
El objeto localStorage es parte de la API de almacenamiento web que admiten la mayoría de los navegadores web. Puede almacenar datos como pares clave-valor usando localStorage. Las claves y los valores únicos deben tener el formato UTF-16 DOM String.
Si desea almacenar objetos o arreglos, tendrá que convertirlos en cadenas usando el JSON.stringify() método. Puede almacenar hasta 5 MB de datos en localStorage. Además, todas las ventanas con el mismo origen pueden compartir los datos de almacenamiento local de ese sitio.
Un navegador no eliminará estos datos incluso cuando un usuario lo cierre. Estará disponible para el sitio web que lo creó durante cualquier sesión futura. Sin embargo, no debe usar localStorage para datos confidenciales, ya que otros scripts que se ejecutan en la misma página pueden acceder a ellos.
almacenamiento local vs. sesiónAlmacenamiento
los almacenamiento local y almacenamiento de sesión los objetos son parte de la API de almacenamiento web que almacena pares clave-valor localmente. Todos los navegadores modernos son compatibles con ambos. Con localStorage, los datos no caducan incluso después de que un usuario cierra su navegador. Esto difiere de sessionStorage, que borra los datos cuando finaliza la sesión de la página. Una sesión de página finaliza cuando cierra una pestaña o ventana.
El código utilizado en este proyecto está disponible en un repositorio GitHub y es gratis para su uso bajo la licencia MIT. Si desea echar un vistazo a una versión en vivo del proyecto de contador de puntaje, puede consultar la versión en vivo manifestación.
¿Cómo funciona el almacenamiento local?
Puede acceder a la funcionalidad localStorage a través de la Window.localStorage propiedad. Esta propiedad proporciona varios métodos como setItem(), getItem() y removeItem(). Puede usarlos para almacenar, leer y eliminar pares clave/valor.
Cómo almacenar datos en localStorage
Puede almacenar datos en localStorage usando el establecer elemento () método. Este método acepta dos argumentos, la clave y el valor correspondiente.
ventana.almacenamientolocal.setItem('Pitón', 'guido van rossum');Aquí, Pitón es la clave y guido van rossum es el valor. Si desea almacenar una matriz o un objeto, deberá convertirlo en una cadena. Puede convertir una matriz o un objeto en una cadena usando el JSON.stringify() método.
ventana.localStorage.setItem('Python', 'Guido van Rossum');constante estudiante = {
nombre: "Yuvraj",
marcas: 85,
tema: "Aprendizaje automático"
}
constante puntuaciones = [76, 77, 34, 67, 88];
ventana.localStorage.setItem('resultado', JSON.stringify (estudiante));
ventana.localStorage.setItem('marcas', JSON.stringify (partituras));
Cómo leer datos de localStorage
Puede leer datos de localStorage usando el obtiene el objeto() método. Este método acepta la clave como parámetro y devuelve el valor como una cadena.
dejar datos1 = ventana.localStorage.getItem('Python');
dejar datos2 = ventana.localStorage.getItem('resultado');
consola.log (datos1);
consola.log (datos2);
Esto produce la siguiente salida:
guido van rossum
{"nombre":"Yuvraj","marcas":85,"tema":"Aprendizaje automático"}Si desea convertir el resultado de una cadena en un objeto, debe utilizar el JSON.parse() método.
dejar datos2 = JSON.analizar gramaticalmente(ventana.localStorage.getItem('resultado'));
consola.log (datos2);Cómo eliminar sesiones de almacenamiento local
Puede eliminar sesiones de localStorage usando el remover el artículo() método. Debe pasar la clave como parámetro a este método para eliminar el par clave-valor. Si la clave existe, el método eliminará el par clave-valor y si la clave no existe, el método no hará nada.
ventana.localStorage.removeItem('Pitón');
ventana.localStorage.removeItem('C++');Cómo borrar todos los elementos en localStorage
Puede borrar todos los elementos del almacenamiento local mediante el claro() método. No necesita pasar ningún parámetro a este método.
ventana.almacenamiento local.claro();Cómo encontrar la longitud de localStorage
Puede encontrar la longitud de localStorage usando el localStorage.longitud propiedad.
dejar len = almacenamiento local.longitud;
consola.log (largo);Cómo obtener la llave en una posición dada
Puede obtener la llave en una posición dada usando el llave() método. Este método acepta el índice como parámetro.
dejar d = almacenamiento local.clave(1);
consola.registro (d);El método key() se usa principalmente para recorrer todos los elementos en localStorage.
Cómo recorrer todos los elementos en localStorage
Puede iterar sobre todos los elementos en localStorage usando un bucle for.
por (dejar yo = 0; i
dejar valor = localStorage.getItem (clave);
consola.log (clave, valor);
}El método key() acepta el índice como argumento y devuelve la clave correspondiente. El método getItem() acepta la clave como argumento y devuelve el valor correspondiente. Por último, el consola.log() El método imprime el par clave-valor.
Proyecto de JavaScript simple basado en localStorage
Con una comprensión de sus métodos básicos, puede desarrollar un proyecto de JavaScript simple basado en almacenamiento local. En este proyecto, creará una aplicación de contador de puntajes que aumentará y disminuirá el conteo de puntajes según el clic de un botón. Además, implementará la funcionalidad para borrar todos los elementos en localStorage.
Crear un índice.html y guión.js archivo en una nueva carpeta y abra los archivos en su editor de código favorito. Use el siguiente código HTML para crear una interfaz para la aplicación de contador de puntaje:
<!DOCTYPE html>
<html>
<cuerpo>
<h1>almacenamiento local en JavaScript</h1>
<botón al hacer clic ="aumentarContador()" tipo ="botón">Aumentar puntaje</button>
<botón al hacer clic ="disminuirContador()" tipo ="botón">Disminuir puntuación</button>
<botón al hacer clic ="borrarContador()" tipo ="botón">Borrar almacenamiento local</button>
<pags>Puntaje:</pags>
<identificación p ="puntaje"></pags>
<pags>Haga clic en el "Aumentar puntaje" botón para aumentar el recuento de puntos</pags>
<pags>Haga clic en el "Disminuir puntuación" botón para disminuir el conteo de puntajes</pags>
<pags>Haga clic en el "Borrar almacenamiento local" botón para borrar el almacenamiento local</pags>
<pags>
Puede cerrar la pestaña del navegador (o ventana), y probar otra vez.
Verás que los datos aún persisten yesno perdido incluso después de cerrar
el navegador.
</pags>
<secuencia de comandos src="guión.js"></script>
</body>
</html>Esta página contiene tres botones: Aumentar puntaje, Disminuir puntuación, y Borrar almacenamiento local. Estos botones llaman al aumentarContador(), disminuirContador(), y borrarContador() funciones respectivamente. Use el siguiente código para agregar funcionalidad a la aplicación de contador de puntaje usando JavaScript.
funciónaumentoContador() {
variable contar = Número(ventana.localStorage.getItem("recuento"));
cuenta += 1;
ventana.almacenamientolocal.setItem("contar", contar);
documento.getElementById("puntaje").innerHTML = cuenta;
}los aumentarContador() recupera el conteo usando el método getItem(). Convierte el resultado en un número, ya que getItem() devuelve una cadena y la almacena en la variable de recuento.
La primera vez que haga clic en el Aumentar puntaje estará antes de cualquier llamada a setItem(). Su navegador no encontrará el contar key en localStorage, por lo que devolverá un valor nulo. Dado que la función Number() devuelve 0 para una entrada nula, no necesita ningún manejo especial de casos. El código puede aumentar de manera segura el valor de conteo antes de almacenarlo y actualizar el documento para mostrar el nuevo valor.
funcióndisminuirContador() {
variable contar = Número(ventana.localStorage.getItem("recuento"));
cuenta -= 1;
ventana.almacenamientolocal.setItem("contar", contar);
documento.getElementById("puntaje").innerHTML = cuenta;
}los disminuirContador() función recupera y comprueba los datos al igual que aumentarContador() lo hace. Decrementa la contar variable por 1, que por defecto es 0.
funciónclaroContador() {
ventana.almacenamiento local.claro();
documento.getElementById("puntaje").innerHTML = "";
}Por último, el borrarContador() función elimina todos los datos de localStorage usando el claro() método.
Haga más con el almacenamiento local
El objeto localStorage tiene varios métodos, incluidos setItem(), getItem(), removeItem() y clear(). Si bien localStorage es fácil de usar, no es seguro almacenar información confidencial. Pero es una buena opción para desarrollar proyectos que no requieran mucho almacenamiento y que no involucren información confidencial.
¿Quiere crear otro proyecto de JavaScript basado en localStorage? Aquí hay una aplicación básica de lista de tareas que puede desarrollar usando HTML, CSS y JavaScript.
