Web Storage

La memorizzazione persistente di informazioni in locale è una delle aree in cui le applicazioni client native hanno sempre avuto un vantaggio rispetto applicazioni web. Con le prime infatti possiamo eseguire la memorizzazione nella più svariate maniere: registro di sistema, files INI, files XML, base di dati etc…
HTML5 Web Storage (Dom Storage) è un modo per i siti web di memorizzare informazioni sul computer dell’utente e recuperarle più tardi. Il concetto è simile a quello dei cookies, con la differenza che è stato concepito per grosse quantità di informazioni.

Supporto

Lo standard è supportato da tutti i moderni browser, possiamo tuttavia testarlo attraverso JavaScript e la feature detection. Se il browser supporta HTML5 Storage esisterà una proprietà localStorage nell’oggetto globale window, altrimenti la proprietà sarà undefined:

function isLocalStorageSupported() {
    return ('localStorage' in window) && window['localStorage'] !== null;
}
if(isLocalStorageSupported){
       // Local Storage disponibile
} else {
       // nessun supporto nativo per  Local Storage
}

Possiamo anche utilizzare la libreria Modernizr per testarne il supporto:

if (Modernizr.localstorage) {
    // Local Storage disponibile
} else {
    // nessun supporto nativo per  Local Storage 
}

Attenzione, JavaScript è case-sensitive, L’attributo di Modernizr è chiamato localstorage tutto minuscolo mentre la proprietà del DOM si chiama window.localStorage (mixed case).
[browserSupport ie=8+ firefox=3.5 chrome=4.0+ safari=4.0+ opera=10.5+ android=2.0+ IPhone=2.0+]

Sicurezza

Visto che le informazioni sono memorizzate sul nostro computer, chiunque ha accesso fisico ad esso potrà probabilmente visionare ed anche modificare il database.
Inoltre qualsiasi sito è in grado di leggere e modificare i propri valori, ma non potrà accedere ai valori memorizzati da altri siti (come per i cookies) , vedere a riguardo: same-origin restriction.
Un’altra cosa da tenere in considerazione è che i dati sono memorizzati in chiaro e non criptati.

Local Storage

I cookies sono limitati nelle dimensioni (circa 4 kb), ed hanno lo spiacevole difetto di essere inviati dal browser al server ogni volta che viene richiesta una nuova pagina, comportando perdite di tempo. Infatti ogni richiesta HTTP comporta l’inutile trasmissione dei soliti dati più e più volte, inoltre questi dati sono inviati in chiaro su Internet (a meno che non si usi il protocollo HTTPS).
I dati del Local Storage, si trovano nel nostro pc, ed i server web potranno accedervi attraverso JavaScript solo se esplicitamente richiesto (molto meglio direi). Inoltre le specifiche del W3C indicano una dimensione limite di 5MB per ogni sito (dominio). Limite che è stato incredibilmente recepito all’unisono (almeno fino ad ora) da tutti i browsers.

Possiamo memorizzate i dati attraverso un nome di chiave che poi utilizzeremo per recuperare gli stessi. La chiave deve essere una stringa mentre i dati di qualsiasi tipo supportato da JavaScript.

Memorizzare un’informazione

Per la memorizzazione ci serviremo del metodo setItem() oppure possiamo direttamente manipolare l’oggetto come un array associativo.

localStorage.setItem("nome", "Simone");
//oppure
localStorage["nome"] = "Simone";
//oppure ancora
localStorage.nome = "Simone";

Attenzione setItem() se richiamto su una chiave esistente andrà in modifica della stessa.

Recuperare un’informazione

Per recuperare i dati salvati utilizzeremo il metodo getItem() oppure possiamo ancora trattare l’oggetto come un array.

localStorage.getItem('nome');
//oppure
localStorage['nome'];
//oppure ancora
localStorage.nome;

Da tenere presente che getItem() se chiamato su una chiave inesistente restituirà undefined piuttosto che generare un’eccezzione.
Attenzione, qualsiasi dato venga archiviato nel “deposito” sarà convertito in stringa attraverso il metodo .toString() prima di essere memorizzato. Dovremo quindi usare tecniche come la serializzazione JSON, per salvare e recuperare oggetti od array, oppure funzioni come parseInt() o parseFloat() per forzare il recupero di valori numerici.

var nomi = Array("Simo","Samu","Frank");
localStorage.setItem('nomi', JSON.stringify(nomi));
console.log(JSON.parse(localStorage.getItem('nomi')));

localStorage.setItem('p', 6.25);
console.log(localStorage.getItem('p') + 2) //6.252
console.log(parseFloat(localStorage.getItem('p')) + 2) //8.25

Rimozione chiavi

Per rimuovere una chiave possiamo usare il metodo removeItem(). Questo metodo se applicato su una chiave inesistente non farà niente. Il metodo clear() svuota l’intera area dello storage.

//rimuovo la chiave "nome"
localStorage.removeItem("nome");

//rimuovo tutte le chiavi (generate dl mio dominio naturalmente)
localStorage.clear();

Ciclare sulle chiavi

Le API ci forniscono anche una proprietà lenght che restituisce il numero di chiavi memorizzate e un metodo key() che ritorna il nome di un chiave specifica e prende come parametro un intero.

 for (var i = 0; i < localStorage.length; i++){
     var keyName = localStorage.key(i);
     document.write(keyName + ": " + localStorage.getItem(keyName) + "
");
}

Session Storage

Il Session Storage fa parte della specifica del Web Storage. Esso fornisce un’API praticamente identica al Local Storage, ma cambia il criterio di conservazione delle informazioni. Come suggerisce il nome il valori nel Session Storage “dovrebbero” sopravvivere solo per una singola sessione del browser (non del server), la cui terminazione di solito avviene quando la finestra del browser viene chiusa.
Attenzione, c’è però un’eccezione.
Quando un browser esegue un “Ripristino della sessione” funzione, generalmente progettata per aiutare gli utenti a recuperare velocemente i tabs aperti dopo un crash del browser o del computer, i valori in Session Storage verranno ripristinati. Così, mentre avremo una nuova sessione sul server, dal punto di vista del browser, è una continuazione della sessione precedente.

// Memorizzazione dati nella sessione corrente
sessionStorage.setItem("username", "Simone");  
  
// Accesso ai dati salvati  
alert( "username = " + sessionStorage.getItem("username"));

L’oggetto sessionStorage si rivela molto utile per agganciarlo ai dati temporanei che devono essere salvati e ripristinati (es. un modulo utente) se il browser è accidentalmente aggiornato oppure va in crash, anche se in quest’ultimo caso i moderni browser prevedono già un ripristino delle informazioni.

// Reupero il campo di testo di cui voglio salvarne il valore 
 var name = document.getElementById("name");  
   
 // Controllo che ci siano valori salvati ed eventualmente li ripristino 
 if ( sessionStorage.getItem("autosave")) {    
    name.value = sessionStorage.getItem("autosave");  
 }  
   
 // Salvo ogni tre secondi il contenuto del campo  
 setInterval(function(){  
    sessionStorage.setItem("autosave", name.value);  
 }, 3000);

L’evento Storage

E’ innescato quando uno storage cambia, ed è valido per sia per il session che per il local storage. Naturalmente la sua gestione non è obbligatoria, anzi, esso rappresenta una semplice notifica che è avvenuto qualcosa nello Storage.
L’evento storage è supportato ovunque sia supportato l’oggetto localStorage (e sessionStorage), quindi anche su IE8. Bene com’è noto IE8 (e versioni precedenti) non supportano il metodo standard W3C per la gestione degli eventi addEventListener(), quindi dovremo fixare la situazione nel classico modo.

if (window.AddEventListener){
    windows.addEventListener('storage', handler, false);
} else {
    window.attachEvent('onstorage', handler);
}
function handler(event){
    if (!event) { event = window.event; }
}

A questo punto, la variabile event che contiene l’oggetto StorageEvent avrà le seguenti proprietà:

Tools

Possiamo “maneggiare” i nostri Web Storage attraverso utili e comodi strumenti che non solo ci consentono di poterli visualizzare facilmente, ma anche poterne modificare e rimuovere le chiavi. Al momento abbiamo le seguenti possibilità:

1. Per Firefox possiamo utilizzare l’estensione Foundstone HTML5 Local Storage Explorer scaricabile a questo indirizzo. L’estensione vale solo per il local storage.
2. Chrome invece ci permette di accedere sia al local che al session storage attraverso i suoi developer tools, basta andare sulla scheda Resources. (Stesso discorso per il Web Inspector di Safari).
3. Per Opera posiamo utilizzare Opera Dragonfly che ora è integrato nel browser, ed andare sulla scheda Archivi.

Risorse

http://dev.w3.org/html5/webstorage/
http://en.wikipedia.org/wiki/Web_Storage