Immaginate di poter salvare i dati della vostra applicazione web sul computer del vostro utente, recuperando quanto salvato quando e come desideriamo e avendo a disposizione ben 5 mega di spazio per ogni applicazione.

Bene, se tutto questo vi sembra un sogno e soprattutto siete pronti a rispondere "con i cookies è impossibile", iniziate a ricredervi: HTML5 ha introdotto il concetto di localStorage, ovvero un sistema di memorizzazione e gestione delle informazioni sul computer dell'utente che ci consente di manipolare in maniera semplice e veloce fino a 5 mega di dati.

Verificare che localStorage sia disponibile

Prima di tutto dobbiamo assicurarci dhe il browser dell'utente supporta localStorage: basta un semplice try/catch come questo:

try {<br />        return 'localStorage' in window && window['localStorage'] !== null;<br />    } catch(e){<br />        return false;<br />    }

oppure è possibile usare Modernizr così:

if (Modernizr.localstorage) {<br />        // window.localStorage disponibile!<br />    } else {<br />        // localstorage non supportato! :(<br />    }

Salvare i dati

Una volta che abbiamo verificato il supporto o meno del localStorage da parte del browser, per salvare i dati nel "archivio locale" dell'utente si può scegliere fra questi due modi:

localStorage.setItem("key1", "value1");  <br />    localStorage["key1"] = "value1"; 

Come avrete notato

localStorage

è di fatto un "oggetto" che possiamo trattare anche come un array associativo – più semplice di così…

Caricare i dati

Una volta salvati i dati, nel momento in cui abbiamo bisogno di recuperarli possiamo usare uno dei due seguenti metodi:

var key1 = localStorage.getItem("key1");<br />    var key1 = localStorage["key1"];

Anche qui, come sopra, accedere al nostro personalissimo database locale è semplice come accedere ad un oggetto (con il metodo getItem) oppure richiamando direttamente il valore della chiave corrispondente

Cancellare una chiave o tutto

Se vogliamo liberarci di una chiave (perchè non serve più) basta fare un semplice:

localStorage.removeItem("key1");

mentre invece se vogliamo svuotare in un colpo solo tutto l'oggetto localStorage:

localStorage.clear();

Supporto, vantaggi/svantaggi rispetto ai cookies e alcune note

Al momento attuale il supporto di localStorage è piuttosto diffuso. I browser che ne consentono l'utilizzo sono:

  • IE 8.0
  • Firefox 3.5
  • Safari 4.0
  • Chrome 4.0
  • Opera 1.5
  • IPhone 2.0
  • Android 2.0

quindi è abbastanza sicuro utilizzarlo nelle nostre applicazioni.

Rispetto ai cookies il localStorage è la soluzioni ideale per progetti in cui abbiamo bisogno di salvare lo "stato" di un'applicazione e i dati trasmessi sono piuttosto pesanti: il limite di 5 mega consente infatti di avere un database piuttosto ampio. Per i cookies, invece, il limite è molto più basso e, soprattutto, essendo parte del protocollo HTTP i dati contenuti nei cookies vengono inviati ad ogni richiesta, creando notevole traffico.

Lo svantaggio principale del localStorage è che non esiste un modo di specificare la scadenza (come si fa invece per i cookie) che dunque deve essere gestita autonomamente.

Oltre a questo, un'altro aspetto di cui tenere conto è che tutti i dati vengono salvati come stringhe, quindi quando ci serve ad esempio un numero è necessario prima trasformarlo nel tipo che ci serve (parseInt per un intero, parseFloat per un numero float o qualche altro metodo ad esempio per valori booleani) se nel contesto in cui stiamo usando localStorage abbiamo bisogno qualcosa di diverso rispetto ad una stringa.

Infine, nel momento in cui dovessimo superare i limiti di spazio che ci sono stati assegnati, al nostro tentativo di aggiungere altri dati al localStorage riceveremo un errore

QUOTA_EXCEEDED_ERR

Prospettive ed idee

Prima di tutto, uno dei punti di forza di questo metodo – come di quasi tutte le soluzioni e tecnologie HTML5 – è la semplicità di utilizzo: basta accedere all'oggetto (o array associativo che dir si voglia)

localStorage

e possiamo gestire i nostri dati in maniera veloce, facile, intuitiva.

Oltre a questo, i vantaggi principali di questo sistema si vedranno a nostro modo di vedere soprattutto sui dispositivi mobili che potranno lavorare anche offline (ad esempio quando non c'è copertura di rete) su dati che poi potranno essere sincronizzati con la versione web, realizzando il sogno di una applicazione "nativa" attraverso l'utilizzo di tecnologie HTML5.

Per quanto riguarda applicazioni pratiche, la prima che ci è venuta in mente è stata nel nostro backoffice. Visto che durante la redazione di un articolo non ci è capitato di rado di perdere qualche oretta di lavoro perchè il browser si è bloccato o è saltata la luce, abbiamo implementato una semplice funzione "autoSave" che salva i contenuti principali di un articolo ogni 10 secondi, per chiederci se desideriamo ricaricare questi dati nel momento in cui iniziamo a scrivere un nuovo articolo. Semplice ma efficace – e risparmia un sacco di arrabbiature! :)