Las propiedades de almacenamiento local de la ventana HTML DOM le permiten almacenar pares de valores en navegadores web utilizando objetos. es de solo lectura
propiedad _ Este objeto no caduca incluso si el navegador está cerrado. Por lo tanto, los datos nunca se pierden.
Valores devueltos: Devuelve un objeto de almacenamiento.
Sintaxis:
-
GUARDAR datos en localStorage usando:
localStorage.setItem("key", "value"); -
LEYENDO datos de localStorage usando:
var name = localStorage.getItem("key"); -
ELIMINAR datos de localStorage usando:
localStorage.removeItem("key");
Ejemplo 1: este ejemplo describe cómo guardar, leer y eliminar datos en localStorage.
HTML
<!DOCTYPE html>
<html>
<head>
<title> HTML DOM Window localStorage Properties </title>
<script>
//Saving data locally
function save() {
var fieldValue = document.getElementById('textfield').value;
localStorage.setItem('text', fieldValue);
}
// Reading data
function get() {
var storedValue = localStorage.getItem('text');
if(storedValue) {
document.getElementById('textfield').value = storedValue;
}
}
// Removing stored data
function remove() {
document.getElementById('textfield').value = '';
localStorage.removeItem('text');
}
</script>
</head>
<body onload="get()">
<p1>
Type something in the text field and
It will Get stored locally by Browser
</p1>
<input type="text" id="textfield" />
<input type="button" value="save" onclick="save()" />
<input type="button" value="clear" onclick="remove()" />
<p2>
when you reopen or reload this page,
your text is still there.
</p2>
<p3>
<br>click on clear to remove it.</p3>
</body>
</html>
Producción:
Almacenamiento local de ventana
Ejemplo 2: Este ejemplo describe los ahorros de cheques
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window localStorage Properties</title>
</head>
<body>
<div id="SHOW"></div>
<script>
if(typeof(Storage) !== "undefined") {
localStorage.setItem("name", "GeeksforGeeks");
document.getElementById("SHOW").innerHTML =
localStorage.getItem("name");
} else {
document.getElementById("SHOW").innerHTML =
"YOUR BROWSER DOES NOT" + "SUPPORT LOCALSTORAGE PROPERTY";
}
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con DOM Window localStorage se enumeran a continuación:
- Google Chrome 4.0
- Internet Explorer 8.0
- Microsoft Edge 12.0
- Firefox 3.5
- Ópera 10.5
- Safari 4.0
Publicación traducida automáticamente
Artículo escrito por AkshayGulati y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA