Una delle novità proposte da html5 è l’introduzione del local storage, ovvero di una serie di specifiche che permettono un netto avanzamento rispetto ai cookie troppo limitati per essere effettivamente utili.
Costruiamo quindi una semplice pagina html5 che ci permetta di settare e leggere una copia key:value
Per prima cosa l’html, un form dove inputare un nome e un bottone per chiamare la funzione che memorizzerà il valore:
<label>Nome:</label><br> <input type=”text” id=”nome”> <input type=”button” value=”Imposta nome” onclick=”setNome()”>
La funzione le gee il valore e lo setta nel nostro localStorage:
function setNome() {
var nome = document.getElementById(“nome”).value;
localStorage.setItem(“Nome”,nome);
}
Possima già verificare il corretto funzionamento usando google chrome e da strumenti–>strumenti per sviluppatori
sotto Resources e local storage ci sarà la nostra copia. analogoa verifica la si può fare con firefox e firebug dal pannelo dom possiamo verificare localStorage.
Passiamo ora alla lettura dell’informazione memorizzata con due funzioni js:
function showStorage() {
var nome = localStorage.getItem(“Nome”);
if (nome != null) { document.getElementById(“mostra_nome”).innerHTML = nome; }
showElem();
}
function showElem(){
var p = document.createElement(“p”);
for(var i = 0; i < localStorage.length; i++) {
p.innerHTML=localStorage.key(i)+”= “+localStorage.getItem(localStorage.key(i));
}
document.getElementById(“ctrl_storage”).appendChild(p);
}
La prima funzione verifica la presenza del valore, la seconda stampa tutti i valori contenuti in locale.
