uso de localstorage javascript
Almacenamiento local-Demo HTML5 con código (4)
Estoy tratando de trabajar con almacenamiento local con formularios usando html5. Simplemente no puedo encontrar una sola demostración en línea. ¿Alguien puede encontrarme una buena demo y un tutorial que funcione? Mi navegador es totalmente compatible.
Aprecio toda la ayuda. Gracias
Aquí hay una demo jsfiddle
(Copia del código js asociado, los usos de localStorage se mencionan en los comentarios)
//Note that if you are writing a userscript, it is a good idea
// to prefix your keys, to reduce the risk of collisions with other
// userscripts or the page itself.
var prefix = "localStorageDemo-";
$("#save").click(function () {
var key = $("#key").attr(''value'');
var value = $("#value").attr(''value'');
localStorage.setItem(prefix + key, value); //******* setItem()
//localStorage[prefix+key] = value; also works
RewriteFromStorage();
});
function RewriteFromStorage() {
$("#data").empty();
for(var i = 0; i < localStorage.length; i++) //******* length
{
var key = localStorage.key(i); //******* key()
if(key.indexOf(prefix) == 0) {
var value = localStorage.getItem(key); //******* getItem()
//var value = localStorage[key]; also works
var shortkey = key.replace(prefix, "");
$("#data").append(
$("<div class=''kvp''>").html(shortkey + "=" + value)
.append($("<input type=''button'' value=''Delete''>")
.attr(''key'', key)
.click(function() { //****** removeItem()
localStorage.removeItem($(this).attr(''key''));
RewriteFromStorage();
})
)
);
}
}
}
RewriteFromStorage();
Eche un vistazo a MDC - DOM Storage o al borrador de almacenamiento web de W3C (ok, menos demostración y más descripción). Pero la API no es tan grande.
El almacenamiento local es parte de las API de HTML5: es un objeto y podemos acceder a este objeto y su funcionalidad a través de JavaScript. Durante este tutorial, usaremos JavaScript para echar un vistazo a los aspectos fundamentales del objeto de almacenamiento local y cómo podemos almacenar y recuperar datos, del lado del cliente.
Los elementos de almacenamiento local se configuran en pares clave / valor, por lo que para cada elemento que deseamos almacenar en el cliente (el dispositivo del usuario final), necesitamos una clave: esta clave debe estar directamente relacionada con los datos con los que se almacena.
Existen múltiples métodos y una propiedad importante a la que tenemos acceso, así que comencemos.
Escribiría este código en un documento HTML5, dentro de sus etiquetas de script.
Elementos de ajuste
En primer lugar, tenemos el método setItem (), que toma nuestro par clave / valor (o, a veces, denominado nombre / valor) como argumento. Este método es muy importante, ya que nos permitirá almacenar realmente los datos en el cliente; Este método no tiene un valor de retorno específico. El método setItem () se ve así:
localStorage.setItem("Name", "Vamsi");
Obtención de artículos
Ahora que hemos echado un vistazo al almacenamiento de algunos datos, obtengamos algunos de esos datos definidos del almacenamiento local. Para hacer esto, tenemos el método getItem (), que toma una clave como argumento y devuelve el valor de cadena que está asociado con él:
localStorage.getItem("Name");
Quitando articulos
Otro método que nos interesa es el método removeItem (). Este método eliminará los elementos del almacenamiento local (hablaremos un poco más sobre ''vaciar'' el almacenamiento local más adelante). El método removeItem () toma una clave como argumento y eliminará el valor asociado a esa clave. Se ve así:
localStorage.removeItem("Name");
Aquí está el ejemplo de ejemplo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Local Storage</title>
<script>
localStorage.setItem("Name", "Vamsi");
localStorage.setItem("Job", "Developer");
localStorage.setItem("Address", "123 html5 street");
localStorage.setItem("Phone", "0123456789");
console.log(localStorage.length);
console.log(localStorage.getItem("Name"));
localStorage.clear();
console.log(localStorage.length);
</script>
</head>
<body>
</body>
</html>
Aquí hay un ejemplo de LocalStorage de HTML5.
Aquí hay un ejemplo de demostración de código http://jsfiddle.net/ccatto/G2SyC/2/ .
Un código simple sería:
// saving data into local storage
localStorage.setItem(''LocalStorageKey'', txtboxFooValue);
// getting data from localstorage
var retrivedValue = localStorage.getItem(''LocalStorageKey'', retrivedValue);
Aquí hay un ejemplo de código más completo en el que ingresas texto en un cuadro de texto y haces clic en un botón. Luego el texto se almacena en LocalStorage y se recupera y se muestra en un div.
<h2>HTML LocalStorage Example</h2>
<section>
<article>
Web Storage example:
<br />
<div id="divDataLocalStorage"></div>
<br />
Value
<input type="text" id="txtboxFooExampleLocalStorage" />
<input type="button" id="btnSaveToLocalStorage" value="Save Text to Local Storage" />
</article>
</section>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
console.log("start log");
$("#btnSaveToLocalStorage").click(function () {
console.log("inside btnSaveToLocalStorage Click function");
SaveToLocalStorage();
});
function SaveToLocalStorage(){
console.log("inside SaveToLocalStorage function");
var txtboxFooValue = $("#txtboxFooExampleLocalStorage").val();
console.log("text box Foo value = ", txtboxFooValue);
localStorage.setItem(''LocalStorageKey'', txtboxFooValue);
console.log(" after setItem in LocalStorage");
RetrieveFromLocalStorage();
}
function RetrieveFromLocalStorage() {
console.log("inside Retrieve from LocalStorage");
var retrivedValue = ''None'';
var retrivedValue = localStorage.getItem(''LocalStorageKey'', retrivedValue);
$("#divDataLocalStorage").text(retrivedValue);
console.log("inside end of retrieve from localstorge");
console.log("retrieved value = ", retrivedValue);
}
</script>
¡Espero que esto ayude!