Tra le limitazioni storiche di JavaScript c'era l'impossibilità di memorizzare i dati in maniera persistente. Gli unici due approcci disponibili sfruttavano i cookie per la persistenza locale e il server per la persistenza remota. Ma mentre il primo approccio ha delle limitazioni sia in quantità di dati memorizzabili che in flessibilità di accesso, il secondo prevede la presenza di un backend lato server che si occupi dell'effettiva persistenza e presuppone di essere online. Le cose poi sono cambiate, anche grazie all'avvento di HTML5.
JavaScript dispone di una serie di API che permettono di gestire dati in maniera più flessibile e senza intermediari. In questa sezione esploreremo quindi le soluzioni disponibili per gestire la persistenza dei dati con JavaScript.
Web Storage
Il Web Storage può essere considerato l'evoluzione dell'approccio basato sui cookie, mediante il quale un'applicazione JavaScript può memorizzare dati localmente sul browser. A differenza dei cookie, il Web Storage mette a disposizione maggior spazio disco, generalmente intorno ai 5MB, e le informazioni non vengono mai trasferite al server.
Tuttavia, come per i cookie, viene mantenuta la same origin policy in base alla quale soltanto gli script che provengono dallo stesso dominio possono accedere allo stesso Web Storage.
La specifica del Web Storage prevede due oggetti per la persistenza dei dati:
| Oggetto | Descrizione |
|---|---|
| localStorage | Consente la memorizzazione permanente dei dati. |
| sessionStorage | Prevede l'eliminazione dei dati alla fine della sessione, che avviene quando viene chiuso il browser o la finestra in cui è eseguita l'applicazione. |
A parte questa differenza sulla durata della persistenza, i due oggetti vengono utilizzati allo stesso modo consentendo di creare coppie di chiave-valore come mostrato nel seguente esempio:
if (typeof(Storage) != "undefined") {
localStorage.utente = "Mario Rossi";
}La prima cosa che abbiamo fatto è stata controllare il supporto del Web Storage da parte del browser corrente, verificando che sia definito l'oggetto Storage, da cui derivano localStorage e sessionStorage. Quindi abbiamo semplicemente assegnato alla proprietà utente una stringa, creando implicitamente la proprietà se questa non esisteva già, come per un normale oggetto JavaScript.
A differenza però delle proprietà di un normale oggetto JavaScript, i valori assegnabili ad una proprietà dello storage devono essere di tipo stringa. Quindi se abbiamo intenzione di memorizzare dati complessi come oggetti o array, dobbiamo prima serializzarli, ad esempio in JSON:
localStorage.utente = JSON.stringify({ nome: "Mario", cognome: "Rossi" });Anche il recupero dei dati memorizzati nello storage è altrettanto semplice. È sufficiente accedere alla proprietà a cui siamo interessati, come nel seguente esempio:
var utente = JSON.parse(localStorage.utente);
document.getElementById("myDiv").innerHTML = "Ciao " + utente.nome;Come per un qualsiasi un oggetto JavaScript, possiamo considerare lo storage come un array associativo ed accedere ai suoi elementi tramite chiave:
localStorage["pigreco"] = "3.14";
var pigreco = localStorage["pigreco"];È anche prevista la possibilità di gestire gli elementi dello storage tramite i metodi getItem() e setItem(), come mostrato nel seguente esempio:
localStorage.setItem("pigreco", "3.14");
var pigreco = localStorage.getItem("pigreco");L'evento storage, gestire la persistenza in modo asincrono
Anche se l'utilizzo delle diverse notazioni ha sempre lo stesso effetto sullo storage, l'uso dei metodi getItem() e setItem() ha la particolarità di poter generare l'evento storage che ci consente di tracciare le modifiche fatte allo storage gestendolo secondo l'approccio standard:
window.addEventListener("storage", function(event) {
console.log("La pagina " + event.url +
" ha modificato la chiave " + event.key +
" sostituendo il valore " + event.oldValue +
" con il valore " + event.newValue);
});L'oggetto event passato al gestore dell'evento mette a disposizione dettagli come l'URL della pagina che ha effettuato la modifica (url), la chiave dello storage che è stata modificata (key), il suo vecchio valore (oldValue) e il nuovo valore assegnato (newValue).
Sottolineiamo che l'evento si verifica soltanto se si verifica una effettiva modifica allo storage. Ad esempio, se ad una chiave viene assegnato il suo stesso valore, l'evento storage non viene generato.
Oltre a getItem() e setItem(), sono anche previsti i metodi:
| Metodo | Descrizione |
|---|---|
| removeItem() | Consente di rimuovere una chiave dallo storage |
| clear() | Elimina tutte le chiavi |
Anche l'esecuzione di questi metodi generano l'evento storage.
In sintesi, la Web Storage API offre un approccio semplice e lineare nella gestione dei dati locali, superando i limiti storici dei cookie. La persistenza dei dati non è però strutturata e le stringhe rappresentano l'unico tipo di dati consentito. Inoltre, in presenza di grandi quantità di dati si può assistere ad un calo delle prestazioni sia in lettura che in scrittura.
Rappresentano comunque una buona soluzione nella maggior parte delle situazioni in cui l'accesso a dati persistenti non rappresenta l'attività principale dell'applicazione.