Categorie
Programmazione

Web Storage HTML5: un’alternativa ai cookies

Le novità introdotte da HTML5 possono essere divise in due categorie. Il primo gruppo delle specifiche riguarda l’organizzazione e le funzionalità del codice markup. Nel secondo gruppo troviamo alcune novità orientate soprattutto a migliorare la tecnologia da un punto di vista più “tecnico”: uno di questi miglioramenti riguarda la possibilità di memorizzare dei dati client side (cioè nel browser).

Il meccanismo attualmente più popolare è sicuramente quello dei cookies. Da sempre esistono alternative ai cookies, come ad esempio la memorizzazione dei dati all’interno di un database leggero (SQLite), ma di fatto le due strade spesso combaciavano (molti browser memorizzano i cookie proprio all’interno del loro database SQLite).

Con HTML5 avremo finalmente a disposizione una valida alternativa ai cookies. I nuovi concetti introdotti con HTML5 riguardano il SessionStorage e il LocalStorage: spieghiamo quali sono le caratteristiche di questi meccanismi e perché si differenziano dal tradizionale utilizzo dei cookie.

Uno dei problemi dei cookies è il seguente. Supponiamo di gestire un’agenzia di viaggi on-line. Un ipotetico cliente potrebbe aprire diverse finestre o tab del browser per confrontare i vari pacchetti vacanza in offerta. Se il cliente inizia a prenotare un viaggio in una finestra, aderendo a certi sconti o condizioni, probabilmente l’applicazione salverà questi dati in un cookie. Se poi il cliente continua l’operazione su un’altra finestra, scegliendo un diverso pacchetto vacanza oppure una diversa promozione, l’applicazione riceverà lo stesso cookie definito in precedenza. Ciò può generare confusione (o difficoltà) nella gestione lato server dei diversi cookies.

Il SessionStorage  HTML5 risolve questo problema perché i valori salvati attraverso il meccanismo dello SessionStorage esistono solamente nel contesto di quella particolare tab o finestra del browser. In altre parole possiamo pensare allo SessionStorage  come ad una versione dei cookies in grado di differenziarsi non solo in base al sito remoto (l’URL di navigazione), ma anche in base alla tab o finestra  utilizzata dall’utente.

L’altro meccanismo definito dalle specifiche HTML5 riguarda il LocalStorage. In questo caso si tratta di un oggetto specifico del browser, condiviso da tutte le istanze (tab o finestre) aperte dall’utente durante la navigazione. Ciò permette, ad esempio, di salvare alcuni i in una finestra, chiudere il browser e poi ritrovarli al successivo riavvio. Oppure possiamo salvare i dati in una finestra e leggerli in un’altra. Ovviamente ciò vale fintanto che usiamo lo stesso browser: il LocalStorage non permette di condividere dati tra browser diversi. Da questo punto di vista  il LocalStorage assomiglia molto al vecchio concetto di cookie: la principale differenza consiste nel fatto che  il LocalStorage presenta delle API migliori di quelle dei cookies, fattore che migliora la qualità e manutenibilità del codice.

Lavorare con il SessionStorage e il LocalStorage richiede di fatto solamente un po’ di programmazione JavaScript, perché gli oggetti introdotti con HTML5 sono disponibili nel DOM del browser, per cui JavaScript è quasi sempre il modo più semplice di gestire questi oggetti. Nelle prossime pagine vedremo alcuni esempi concreti di utilizzo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.