HTML5, localStorage e sessionStorage: salvare i dati utilizzando il browser

Internet è uno strumento davvero potente e grazie al nuovo HTML5 le sue potenzialità sono incrementate notevolmente, abbiamo infatti già visto come questa nuova versione possa essere di grande aiuto per migliorare la semanticità del linguaggio stesso, per aiutare l’utente a compilare i moduli presenti nelle nostre pagine e, di recente, abbiamo anche visto come sia possibile scoprire la posizione dei nostri visitatori (sempre se loro ce lo consentono).

Ma il linguaggio HTML5 non soltanto si è sviluppato portando nuove caratteristiche di grande interesse, ma ha anche aggiornato il nostro modo di salvare i dati passati dall’utente all’interno dei propri browser.

Se non li avete mai incontrati, sin dagli anni ‘90 avevamo un elemento zuccheroso che ci permetteva di salvare all’interno del browser informazioni che ritenevamo rilevanti per la navigazione del nostro sito; se non vi è venuto in mente niente, sto parlando dei cookies.

Il problema più grande di questi elementi era che, per ricordarsi delle informazioni salvate, il nostro browser doveva scambiarsi messaggi di stato con il server ad ogni nuova pagina che il nostro utente visitava; questa caratteristica, sopratutto nei siti dove è possibile prenotare viaggi o abitazioni, si traduceva in un grande spreco di risorse che potevano essere utilizzate per velocizzare il tempo di risposta dei siti web.

Grazie all’avvento dell' HTML5 abbiamo ben due oggetti che ci permetteranno di salvare la nostra preziosa banda (e i carichi di traffico sul server): sessionStorage e localStorage.

Visto che entrambi condividono le stesse proprietà e funzioni andrò a focalizzare la mia attenzione sul secondo ma, se vi state chiedendo quali siano le differenze tra i due, vi basterà sapere che il primo perderà tutti i dati quando la finestra del browser verrà chiusa.

Come definito precedentemente, tutto quello che salverete all’interno di un oggetto localStorage, sarà mantenuto dentro al browser e resisterà anche allo spegnimento del computer; ma che cosa è possibile salvare all’interno di questo oggetto?

Siamo limitati alla possibilità di salvare delle stringhe di testo proprio come succede per i cookie, ma andando ad utilizzare localStorage, o sessionStorage se questo soddisfa le vostre necessità, non sarà necessaria alcuna comunicazione con il server dato che la pagina web sarà in grado di interrogare direttamente il browser.

Andiamo quindi a vedere come sia possibile utilizzare questo oggetto, ma prima, devo dirvi che per il suo corretto funzionamento avete bisogno di un server web a vostra disposizione; anche i più semplici WAMP o MAMP soddisferanno le vostre necessità.

Dato che stiamo andando ad utilizzare un oggetto che altrimenti sarebbe vuoto, iniziamo intanto con imparare come dichiararne uno:

Come potete vedere, quello che abbiamo fatto è stato utilizzare la funzione setItem() che accetta due parametri. Il primo funzionerà come indice e ci permetterà di richiamare successivamente il valore che abbiamo impostato, il secondo non è altro che il valore vero e proprio che vogliamo salvare all’interno del browser.

Ricordandoci che la sintassi sarà la stessa anche se lavoriamo con l’oggetto sessionStorage, andiamo a vedere una variante del salvataggio di valori:

Adesso che abbiamo visto tutti i possibili metodi per il salvataggio, che ne dite se andiamo a vedere come sia possibile recuperare questi valori?

Adesso che sappiamo come impostare e richiamare nuovi valori potrete essere in grado di iniziare a sperimentare con questa nuova caratteristica, ricordatevi che potrete sempre aiutarvi con i tool di ispezione presenti per i vari browser. L’immagine che segue rappresenta i Dev Tool che sono inseriti all’interno di Google Chrome.

Prima di concludere vorrei presentarvi altri parametri e funzioni che vi saranno utili per lavorare con questo tipo di oggetti:

• length - è una proprietà dell’oggetto che ci permetterà di conoscere quanti elementi sono contenuti al suo interno, il suo indice parte da 0 proprio come per gli array;
• key( indice ) - inserendo il valore numerico dell’indice ci restituirà il valore salvato in questa posizione;
• removeItem( chiave ) - con questa funzione saremo in grado di rimuovere il valore salvato dato il proprio indice.