JavaScript es uno de los lenguajes de programación compilados interpretados ligeros más populares del mundo. Es síncrono y de un solo subproceso. En JavaScript , los programas se denominan scripts . Estos scripts se ejecutan como texto sin formato. Podemos escribirlos directamente en nuestra página HTML o usar un archivo Javascript externo. JavaScript puede ejecutarse en el navegador, y también en el servidor, o en cualquier dispositivo que tenga un programa especial llamado JavaScriptengine . JavaScript se utiliza tanto para desarrollos del lado del cliente como del lado del servidor .
Navegador proporciona HTML DOM Window localStorage y nos permite almacenar datos como pares clave-valor en nuestro navegador web usando un objeto. LocalStorage es la propiedad de solo lectura de la interfaz de la ventana.
Los datos se almacenan como pares clave-valor y las claves son únicas . Las claves y los valores siempre están en el formato UTF-16 DOM String que se almacena dentro de localStorage .
Las principales características de localStorage son:
- El almacenamiento está limitado por el origen (dominio).
- Los datos no se eliminarán incluso si el navegador está cerrado o incluso si se reinicia el sistema operativo y estarán disponibles hasta que borre manualmente el almacenamiento local de nuestro navegador.
Sintaxis:
ourStorage = window.localStorage;
Lo anterior devolverá un objeto de almacenamiento que se puede usar para acceder al espacio de almacenamiento local del origen actual.
Propiedades y métodos proporcionados por el objeto localStorage :
- setItem( clave , valor ): almacena el par clave/valor
- getItem( clave ): devuelve el valor delante de la clave
- clave ( índice ): obtener la clave en un índice dado
- longitud: devuelve el número de elementos almacenados (datos)
- removeItem( clave ): elimina la clave dada con su valor
- clear(): elimina todo del almacenamiento
Ejemplo: el siguiente fragmento accede al objeto localStorage del dominio actual .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>JavaScript localStorage</title>
<style>
div {
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid black;
background-color: green;
color: white;
margin: auto;
text-align: center;
font-size: 1.5rem;
}
.box {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">GeeksforGeeks</div>
<script>
// Saving data as key/value pair
localStorage.setItem("name", "GeeksforGeeks");
localStorage.setItem("color", "green");
// Updating data
localStorage.setItem("name", "GeeksforGeeks(GfG)");
localStorage.setItem("color", "Blue");
// Get the data by key
let name = localStorage.getItem("name");
console.log("This is - ", name);
let color = localStorage.getItem("color");
console.log("Value of color is - ", color);
// Get key on a given position
let key1 = localStorage.key(1);
console.log(key1);
// Get number of stored items
let items = localStorage.length;
console.log("Total number of items is ", items);
// Remove key with its value
localStorage.removeItem("color");
// Delete everything
localStorage.clear();
</script>
</body>
</html>
Producción:
Nota: Para ver los datos en el almacenamiento local del navegador, haga lo siguiente.
- Abre tu código en el navegador.
- Haga clic derecho y haga clic en Inspeccionar.
- Luego vaya a la pestaña Aplicaciones en la barra de herramientas.
- Guardar datos como par clave/valor
- Actualizando datos
- Obtener datos, índice de una clave y número de elementos almacenados
- Eliminar una clave con su valor
- Eliminar todo en el almacenamiento
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA