HTML5 Web Storage: memorizzare dati lato Client

In questo post vedremo come HTML5 permette di memorizzare dati sotto forma di coppie chiave- valore, all’interno del browser di un Client.

Per adempiere a questo scopo HTML5 fornisce due oggetti accessibili tramite l’oggetto globale window:

• sessionStorage: per conservare dati all’interno della singola sessione (fino a quando viene chiusa la window);
• localStorage: per conservare dati anche tra più sessioni (anche se viene chiuso il browser.

I due oggetti svolgono le medesime funzionalità dei Cookies (localStorage le estende rendendo i dati disponibili anche per più sessioni) ottimizzando le prestazioni visto che nessun dato viene scambiato tra Client e Server.

Entrambi gli oggetti offrono una serie di metodi definiti nella interfaccia Storage che essi implementano:

interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any value);
  deleter void removeItem(in DOMString key);
  void clear();
};

offrono dunque dei metodi per settare una coppia chiave – valore (setItem()), ottenere un valore data la chiave (getItem()), ecc..

Per verificare se un browser supporta l’oggetto localStorage utilizziamo questo codice:

function detectLocalStorage(){
return (('localStorage' in window) && window['localStorage'] !== null);
}

per il sessionStorage basta cambiare il nome all’interno dello statement. Nel momento in cui scriviamo gli oggetti Storage sono supportati da tutti le ultime versioni di browser, incluso Internet Explorer 8, anche se quest’ultimo si differisce per la diversa sintassi di gestione per gli eventi.

Vediamo ora come utilizzare i due oggetti, facciamo degli esempi utilizzando il localStorage, il funzionamento di sessionStore è il medesimo cambia soltanto lo scope:

//recupero il valore con chiave username
var username= localStorage.getItem("username");
// setto un valore con chiave username
localStorage.setItem("username", username);

Durante una setItem() può essere generata una eccezione dovuta ad esempio quando un utente vieta ad un sito di utilizzare il localSorage o perchè viene superata la quota di storage disponibile, conviene dunque catturare questa eccezione:

try {
 localStorage.setItem(“username”, username);
} catch (e) {
 if (e == QUOTA_EXCEEDED_ERR) {
   alert(‘Quota superata o sito non abilitato a salvare dati!’);
  }
}

Possiamo inoltre monitorare quando un metodo setItem(), removeItem(), o clear() viene chiamato e qualcosa viene cambiato. Viene infatti generato un evento sull’oggetto window che possiamo intercettare andando a definire degli handler customizzati:

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
//IE supporta una sintassi differente per la gestione degli eventi
window.attachEvent("onstorage", handle_storage);
};

la condizione else è dovuta al fatto che IE gestisce una sintassi diversa per gli eventi: non supporta il metodo addEventListener ma utilizza un metodo equivalente chiamato attachEvent e per il nome degli eventi da catturare vuole il prefisso “on”.

Quando viene scatenato un evento viene chiamata la funzione handle_storage passandole come parametro un evento StorageEvent, definito in questo modo:

interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute any oldValue;
  readonly attribute any newValue;
  readonly attribute DOMString url;
  readonly attribute Storage storageArea;
  void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg,
  in DOMString keyArg, in any oldValueArg, in any newValueArg, in DOMString urlArg, in Storage storageAreaArg);
};

possiamo ad esempio sapere il nuovo e vecchio valore salvato all’interno della chiave modificata. Anche stavolta IE 8 supporta una diversa convenzione in quanto gli oggetti di tipo Event sono conservati nell’oggetto window.event, di conseguenza dobbiamo aggiungere uno if statement per gestirlo:

function handle_storage(e) {
  //se è Internet Explorer
  if (!e) {
  e = window.event;
  }
}