Da più di 10 anni una parte dei dati delle applicazioni web viene salvata in piccoli file di testo chiamati "cookie". Questi file, creati lato server (o con JavaScript) possono contenere dati di tipo chiave/valore ed il loro utilizzo è abbastanza vario: processi di autenticazione, carrelli della spesa dei siti di e-commerce, impostazioni di colori o altro su di un sito, tracciabilità delle abitudini dell'utente, ecc.

Il limite principale dei cookie è che non si possono salvare più di 4 Kb di dati, per cui non è possibile utilizzarli in scenari che richiedono la gestione di un quantitativo di dati superiore.

Inoltre i cookie vengono scambiati tra client e server ad ogni richiesta HTTP, aumentando sensibilmente il traffico da e verso il web server, non giovando alle performance generali del sito.

HTML5 introduce in modo nativo e condiviso tra i browser una nuova interfaccia di programmazione (API): Web Data Storage.

Esistono due tipi di storage:

• localStorage dove la persistenza dei dati è tale per cui, in caso di sessione scaduta di una pagina, chiusura del browser e/o tab ecc. i dati rimangono disponibili per accessi successivi e da tutte le finistre e/o tab del browser;
• sessionStorage, più restrittivo rispetto a localStorage in quanto non è possibile avere la persistenza dei dati su più finestre e/o tab del browser e, in caso di chiusura di quest'ultimo, non è possibile recuperare i dati salvati.

Web Data Storage è supportato da tutti i browser moderni (in Internet Explorer a partire dalla versione 8) e tipicamente mette a disposizione 5 MB per il salvataggio dei dati di ogni applicazione.
Per determinare se il browser in uso supporta o meno questa API possiamo utilizzare la seguente funzione JavaScript:

function isStorageAvailable(storageType) // "localStorage" || "sessionStorage"
{
    try
    {
        return (storageType in window && window[storageType] !== null); 
    }
    catch(e)
    {
        return false;
    }
}

Oppure, più semplicemente, utilizzando la libreria Modernizr:

if (Modernizr.localstorage) // Modernizr.sessionStorage
{
    // codice per l'utilizzo della funzionalità
} else 
{
    //codice alternativo per salvare i dati
}

Scrivere e leggere i dati nello storage

localStorage.setItem("color", "Red");

Oppure, più semplicemente, utilizzando la sintassi:

localStorage.color = "Red";

Per recuperare i dati salvati è possibile utilizzare il metodo getItem:

var color = localStorage.getItem("color");

Oppure:

var color = localStorage.color;

È anche possibile iterare l'intera collezione di chiavi memorizzate, come mostrato nell'esempio seguente:

localStorage.setItem("name", "Mario");
localStorage.setItem("lastName", "Rossi");
localStorage.setItem("telefono", "123456789");
var k, v;
for (int i=0; i < localStorage.length; i++)
{
    
    k = localStorage.key(i); // ottiene una chiave dalla sua posizione nell'indice
    valore = localStorage.getItem(k);
    dati = "Chiave " + k + ", valore: " + v;
    alert(dati);
}

Eliminazione dei dati

localStorage.removeItem("color");

Per cancellare completamente ogni dato memorizzato dalla nostra applicazione nello storage possiamo utilizzare il metodo clear:

localStorage.clear();