Webstorage HTML5

Iniziamo con questa lezione il viaggio tra le specifiche meno note che ruotano intorno ad HTML5 in un orbita più "periferica".

Alcune delle features che vedremo sono ancora in una fase di definizione relativamente iniziale e l’adoption da parte dei vari user-agents è ancora assolutamente parziale. Eviteremo per questo di dettagliare a fondo i temi, preferendo dare una introduzione, per quanto corposa, dei vari argomenti.

Webstorage

Salvare i dati in sessione è operazione quotidiana per gli sviluppatori.

La specifica (il cui documento potete trovare qui)tratta due meccanismi per salvare dati strutturati client-side, sul modello dei session cookies.

Lo scopo è di evitare le limitazioni dei cookie stessi. Pensiamo ad uno scenario in cui un utente porti avanti due transazioni, (ad esempio l’acquisto di un libro o di un biglietto aereo) nel medesimo istante, su due finestre diverse, nel medesimo sito. Qualora per tenere traccia degli acquisti il sito usasse i cookie potrebbe crearsi la situazione in cui l’utente potrebbe trovarsi ad avere acquistato due libri (o due biglietti) senza averne l’intenzione.

Al fine di superare questi problemi la specifica Webstorage introduce un attributo sessionStorage. I siti lo utilizzeranno per salvare dati ed esso rimarrà accessibile da ogni pagina dello stesso sito aperta in quella finestra. Ogni finestra aperta (del sito) avrà la sua copia dell’oggetto sessionStorage.

Pensiamo alla situazione in cui ad un utente venga richiesto di dare un consenso tramite una checkbox:

<label>
  <input type="checkbox" onchange="sessionStorage.marketing = checked ? 'true' : ''">
  Accetto che l'azienda mi spedisca mail informative sui nuovi prodotti
</label>

Una pagina successiva potrà accedere all’informazione tramite:

sessionStorage.marketing

Il secondo meccanismo di salvataggio è pensato per finestre multiple e dura oltra la sessione corrente. Le applicazioni potrebbero decidere di salvare intere mailbox o documenti lato client, per questioni di performance. I cookie non sono adatti a questa situazione perchè vengono trasmessi ad ogni request. Allo scopo esiste l’attributo localStorage.

Il conteggio delle visite di un utente:

<p>Hai visitato la pagina <span id="count"></span> volte.</p>
<script>
// # Controllo che esista pageLoadCount nel localStorage
if (!localStorage.pageLoadCount) {
  localStorage.pageLoadCount = 0; // init
}

localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
document.getElementById("count").textContent = localStorage.pageLoadCount;
</script>

Ogni sito avrà la sua area di salvataggio dedicata.

L’interfaccia Storage

Signature

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

Ogni oggetto Storage fornisce accesso ad una lista di coppie (items) chiave(stringa) – valore (stringa).

Storage possiede una length che indica il numero di coppie. Il metodo key(n) ritorna il nome della chiave posta ad offset n nella lista. Qualora n sia >= di length key(n) torna null.

getItem(key) torna il valore associato alla chiave spedita come parametro; null in caso la chiave non esistesse.

setItem(key, value) controlla che la chiave esista, se così fosse verrà effettuato un update del valore, altrimenti verrà creata una coppia ex-novo. Se qualcosa non funzionasse nel setting (quota dello storage superata, storage disabilitato) lancerà una QuotaExceededError exception.

removeItem(key) rimuove la coppia.

setItem() e removeItem() cambiano lo stato dello storage solo in caso di successo, qualora fallissero i dati salvatio non verrebbero alterati.

il metodo clear() svuota la lista di coppie.

SessionStorage

Signature

[NoInterfaceObject]
interface WindowSessionStorage {
  readonly attribute Storage sessionStorage;
};
Window implements WindowSessionStorage;

L’attributo sessionStorage rappresenta un insieme di aree di salvataggio, univoche rispetto al contesto di navigazione.

LocalStorage

Signature

[NoInterfaceObject]
interface WindowLocalStorage {
  readonly attribute Storage localStorage;
};
Window implements WindowLocalStorage;

localStorage fornisce un oggetto Storage per un origine.

L’evento storage

L’evento storage viene lanciato ogniqualvolta l’area di salvataggio subisca una modifica (tramite una setItem, una removeItem od una clear). Quando ciò accade lo user-agent lancia l’evento in broadcast per avvisare ogni finestra il cui Document object possegga un oggetto Storage che debba essere avvisato del cambiamento avvenuto.

StorageEvent

Signature

[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute DOMString? oldValue;
  readonly attribute DOMString? newValue;
  readonly attribute DOMString url;
  readonly attribute Storage? storageArea;
};

dictionary StorageEventInit : EventInit {
  DOMString key;
  DOMString? oldValue;
  DOMString? newValue;
  DOMString url;
  Storage? storageArea;
};

key rappresenta la chiave da modificare; oldValue rappresenta il valore precedente; newValue il nuovo valore assegnato; url indica l’indirizzo del documento la cui chiave è stata modificata; storageArea rappresenta l’oggetto Storage modificato.

Gli user-agent dovrebbero limitare lo spazio allocato per ogni origine (calcolando i terzi livelli), il documento suggerisce questo limite venga fissato a 5 megabytes.