WebStorage API

Link copiato negli appunti

Le WebStorage API nascono per risolvere due problematiche tipiche dei cookies; la loro limitata dimensione massima (tipicamente 4K) e l’impossibilità di avere cookies differenziati tra due diverse sessioni di navigazione sullo stesso dominio dallo stesso browser. Il secondo punto si esplicita molto bene cercando di mantenere aperti contemporaneamente due account Gmail sullo stesso browser, ogni navigazione sul primo comporterà il logout del secondo e viceversa.

I problemi in questione sono stati risolti creando due nuovi oggetti. sessionStorage consente di avere un meccanismo di persistenza dei dati distinto per ogni sessione di navigazione in ogni finestra, o tab, del browser. Usando sessionStorage sarebbe quindi possibile coordinare l’apertura contemporanea di due distinti account GMail sullo stesso browser. localStorage mantiene il comportamento del cookie essendo comune a tutte finestre del browser che condividono lo stesso dominio. Entrambi sono inoltre stati studiati per ospitare molti più dati, almeno 5Mb, ed essere persistenti anche alla chiusura ed alla riapertura del browser.

Le specifiche

Le API si compongono di una singola interfaccia Storage. localStorage e sessionStorage implementano entrambi questa interfaccia e quindi dispongono dello stesso set di metodi anche se chiaramente restano due oggetti distinti. Le principali operazioni possono essere eseguite come su di un normale array associativo:

localStorage.nome	= 'Sandro';
localStorage.cognome	= 'Paganotti';

o con l’ausilio di metodi dedicati:

localStorage.setItem('nome','Sandro');
localStorage.getItem('nome'); // ritorna 'Sandro'

Se però ci accingiamo ad inserire valori diversi da stringhe il comportamento diverge: in un oggetto come localStorage o sessionStorage è consentita la memorizzazione di soli contenuti testuali:

localStorage.ordini = Array("1","2","3");
localStorage.ordini; // ritorna "1,2,3"

È quindi necessario ricorrere a stratagemmi, come la serializzazione su JSON, per ottenere l’effetto desiderato:

localStorage.ordini = JSON.stringify(Array(1,2,3));
JSON.parse(localStorage.ordini); // ritorna un array di 3 elementi: [1,2,3]

Chromium mette a disposizione degli sviluppatori web che intendono utilizzare queste API la linguetta ‘Storage’ dei Developer Tools (raggiungibili da menu o con la combinazione di tasti Control - Shift - J e visibile in figura 1):

Figura 1 (click per ingrandire)

Un esempio

Utilizziamo il progetto guida per implementare una meccanica di salvataggio dei dati basata su localStorage. Non avendo ancora sviluppato la gestione della lavagna ci concentreremo sul memorizzare e visualizzare stringhe inserite dall’utente attraverso una textarea, iniziamo con il markup completando il file index.html:

<!doctype html>
<html lang='it' manifest='fiveboard.manifest'>
<head>
  <meta charset="utf-8">
  <title>FiveBoard: uno spazio per gli appunti.</title>
  <script src="js/application.js" defer></script>
</head>
<body>
  <hgroup>
    <h1>Dì qualcosa </h1>
    <h2>FiveBoard ricorda tutto</h2>
  </hgroup>
  <form name="form_da_ricordare">
    <menu type="toolbar">
      <button type="button" onclick="salvaIlDato(this.form.elements['testo_da_ricordare'].value);">
      Memorizza quanto scritto
      </button>
      <button type="button" onclick="recuperaIlDato(this.form.elements['testo_da_ricordare']);">
      Recupera l'ultimo testo memorizzato
    </button>
    </menu>
    <label>Cosa hai in mente?
      <textarea name="testo_da_ricordare" required autofocus
      placeholder="La lista della spesa, il teatro di questa sera ..."></textarea>
    </label>
  </form>
</body>
</html>

Dato che questo progetto si configura più come una web application che come un sito web, implementiamo una classica struttura di controllo desktop-oriented: la toolbar. All’interno di questa, due semplici pulsanti gestiscono le azioni di memorizzazione e recupero del testo salvato attraverso una textarea; l’attributo ‘autofocus’ indica allo user-agent di portare il cursore in posizione di inserimento testo nell’istante di completo caricamento della pagina.

Ora, nel file application.js completiamo l’esempio introducendo le funzioni di salvataggio e di recupero informazioni basate su localStorage:

salvaIlDato = function(info_da_salvare){
  localStorage.ultimo_pensiero = info_da_salvare;
  alert("Memorizzazione effettuata");
};
recuperaIlDato = function(elemento){
  if(confirm("Sostituire il contenuto attuale con l'ultimo pensiero memorizzato?")){
    elemento.value = localStorage.ultimo_pensiero;
  }
};

Bene, non ci resta che provare l’esempio all’interno di Chromium e constatare il suo semplice ma efficace funzionamento, capace di persistere l’informazione anche a seguito di un riavvio del browser.