Guida HTML5: Web storage

Durante lo scorso articolo abbiamo definitivamente chiuso la sezione dedicata al Canvas. Oggi passiamo, quindi, a occuparci di un’altra fondamentale funzionalità offertaci dall’HTML5: il web storage.

Come probabilmente saprai, esistono due modi di conservare dati nel web: attraverso il server e attraverso il client. In alcuni casi, basti pensare al carrello di un negozio online, è assolutamente necessario conservare i dati sul server ma, in altri casi, è molto più conveniente limitarsi a salvare alcune preferenze attraverso lo stesso browser e, quindi, sul client. Prima dell’avvento dell’HTML5, l’unico modo di conservare i dati lato client era utilizzare i cookies, che, nonostante restino utilissimi per gestire piccole quantità di dati, presentano ancora forti svantaggi nella manipolazione, come l’utilizzo di un modello JavaScript abbastanza grande e l’obbligo di dover interagire anche con dati scaduti e non più necessari. L’alternativa proposta dall’HTML5 è, come abbiamo già accennato, il meccanismo chiamato web storage che ci permette, con poche e semplici linee di JavaScript, di gestire i dati in modo molto più pratico.

Meccanismo di base

Esistono due meccanismi per conservare le informazioni tramite web server. Le alternative sono essenzialmente molto simili e differiscono unicamente per la loro durata:

  • Local storage: le informazioni vengono accumulate localmente e indipendentemente dal browser. Questo significa che i dati continueranno a ‘vivere’ indipendentemente dall’attività del browser; l’utente continuerà a usufruire di quelle informazioni per giorni, settimane, anni, a meno che non decida di eliminarli proprio come accade per i cookies;
  • Session storage: le informazioni vengono accumulate all’interno del browser stesso e sono legate alla chiusura di una finestra. La sessione viene svuotata appena la finestra viene chiusa;

Il codice per utilizzare entrambi i metodi è elementare. La sintassi per conservare informazioni localmente è:

    localStorage[chiave] = data

dove chiave rappresenta il nome per richiamare l’informazione e data rappresenta il contenuto dell’informazione. Allo stesso modo, per conservare dati attraverso una sessione, la sintassi è:

    sessionStorage[chiave] = data

Per capire meglio facciamo subito un esempio pratico. Come abbiamo imparato a fare nelle scorse lezioni, creiamo un form che abbia due campi di testo, rispettivamente uno per il local storage e un altro per il session storage, e due pulsanti, uno per salvare i dati e l’altro per richiamarli. L’aspetto del nostro form sarà, più o meno, il seguente:

webstoragehtml5

Dal punto di vista, invece, del codice JavaScript preposto al web storage, avremo:

 // funzione per salvare i dati
  function saveData() {
    // associamo le due variabili al contenuto dei campi di testo
    var localData = document.getElementById("localData").value;
    var sessionData = document.getElementById("sessionData").value;
    // saviamo i dati nei due differenti modi: local storage e session storage
    localStorage.setItem("localData", localData);  
    sessionStorage.setItem("sessionData", sessionData);
    // puliamo i campi
    var localData = document.getElementById("localData").value = "";
    var localData = document.getElementById("sessionData").value = "";
  }
  // funzione per caricare i dati
  function loadData() {
    // richiamo i valori dal web storage
    var localData = localStorage.getItem("localData");  
    var sessionData = sessionStorage.getItem("sessionData");  
    // se non sono valori vuoti, riporto i valori nei campi di testo
    if (localData != null) {
      document.getElementById("localData").value = localData;  
    }
    if (sessionData != null) {
      document.getElementById("sessionData").value = sessionData;  
    }
  }

Seguendo il senso dei commenti alle funzioni, puoi facilmente intuire che, premendo il tasto salva il contenuto dei due campi sarà passato, rispettivamente, a una variabile di tipo local e a un’altra di tipo session. Attraverso il tasto carica, invece, i due campi di testo verranno popolati richiamando il contenuto delle due variabili.

Immaginiamo, adesso, un impiego pratico di quanto abbiamo appena discusso. Mettiamo caso, ad esempio, che il nostro ipotetico utente vogliamo modificare il colore di sfondo della pagina e che voglia poter visualizzare il sito con le preferenze da lui scelte anche una volta chiusa la scheda. Per far ciò ci basta creare un semplice form e associare a esso una funzione JavaScript che si occupi di salvare in una variabile il colore scelto. Il codice sarà simile al seguente:

    var bgcolor = document.getElementById('bgcolor').value;
    localStorage.setItem('bgcolor', bgcolor);

Per applicare l’impostazione, invece, la richiameremo in questo modo:

    document.body.style.backgroundColor = localStorage.getItem('bgcolor');

Per visualizzare il codice completo di quest’esempio ti basta scaricare, come consuetudine, l’archivio al termine di questa lezione!

Eliminare e mostrare tutti gli elementi

Eliminare elementi dal web storage è altrettanto semplice. Per eliminare un singolo elemento basta utilizzare il metodo removeItem:

    localStorage.removeItem(“chiave”);

In alternativa, volendo essere più drastici e svuotare tutte le informazioni accumulate dal sito, possiamo utilizzare il metodo clear:

    localStorage.clear();

Se invece vogliamo visualizzare tutti i valori accumulati tramite web storage, senza quindi specificare una chiave d’accesso, possiamo utilizzare un codice come il seguente che, tramite l’utilizzo di un semplice ciclo for, crea una lista dei valori:

function findAllLocal() {
    var localList = document.getElementById("localList");
    localList.innerHTML = "";
    for (var i=0; i<localStorage.length; i++) {
      var key = localStorage.key(i);
      var item = localStorage.getItem(key);
      var newItem = document.createElement("li");
      newItem.innerHTML = key + ": " + item;
      localList.appendChild(newItem);
    }
  }

Ovviamente è possibile fare lo stesso tipo di ragionamento per visualizzare i valori accumulati in un web storage di tipo session.

Prima di concludere questa lezione, voglio lasciarti con una precisazione che ti tornerà molto utile nel caso dovessi utilizzare variabili di tipo numerico. Come forse avrai notato, qualsiasi oggetto che venga conservato in un web storage viene automaticamente convertito in una stringa di testo. Per forzare il codice a considerare il valore immesso come un numero e non come una stringa, basta utilizzare questo semplice espediente:

    x = Number(localStorage[“number_a”]);

Conclusioni

Nel corso di questo articolo abbiamo affrontato il tema del web storage con le sue varianti e i suoi meccanismi di base. Tuttavia, come puoi facilmente immaginare, il web storage ha potenzialità molto più elevate di quanto mostrate. Ho scelto di non dilungarmi troppo sull’argomento poiché, procedere in quel senso, avrebbe richiesto una conoscenza di JavaScript che non voglio render prerequisito di questa guida. Se, però, hai intenzione di approfondire l’argomento, ti consiglio di leggere la guida ufficiale del W3C.

Come al solito, tramite questo link, è possibile scaricare il codice completo della lezione.

GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici 
6) Guida HTML5: i form – Parte 1 
7) Guida HTML5: i form – Parte 2
8) Guida HTML5: i form – Parte 3
9) Guida HTML5: i form – Parte 4
10) Guida HTML5:i tag audio e video – parte 1
11) Guida HTML5:i tag audio e video – parte 2
12) Guida HTML5: I player video
13) HTML5: Il Canvas – Parte 1
14) Guida HTML5: Il Canvas – Parte 2
15) HTML5: Il Canvas – Parte 3
16) HTML5: Il Canvas – Parte 4
17) HTML5: Web storage
18) Web worker

Tag: , , ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

1 commento

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo