Tra le nuove funzionalità introdotte da HTML5, il localStorage (assieme al suo corrispettivo a 'breve termine' sessionStorage) è una delle più comode: offre infatti la possibilità di salvare dati relativi a una determinata applicazione web all’interno del database del browser.


Molto più completo dei Cookie, sia in termini di dimensioni (5Mb) sia in termini di carico del server (genera molto meno traffico), ha una grossa limitazione: può archiviare in maniera efficace solamente strutture dati 'semplici', come stringhe o numeri.



Se si prova infatti a effettuare un'operazione del genere
var array1 = new Array("Primo", "Secondo", "Terzo");
window.localStorage.setItem("cachedArray", array1);

l'archiviazione fallisce.



La soluzione più rapida è serializzare l'oggetto da archiviare (nel nostro caso un array) e trasformarlo in una stringa JSON:

var array1 = new Array("Primo", "Secondo", "Terzo");
window.localStorage.setItem("cachedArray", JSON.stringify(array1));

e in questo modo i nostri dati vengono salvati in maniera corretta.

Quando andremo a rileggerli, utilizzeremo il procedimento inverso:

var array2 = JSON.parse(window.localStorage.getItem("cachedArray"));

Possiamo anche rendere il tutto ancora più comodo e trasparente, estendendo l'oggetto Storage :

Storage.prototype.setArray = function(key, obj) {
    return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getArray = function(key) {
    return JSON.parse(this.getItem(key))
}

(ringrazio Joseph Labrecque per il suggerimento)


In questo modo aggiungiamo all'oggetto storage due nuovi metodi, setArray e getArray che potremo utilizzare rispettivamente per salvare e leggere array dal localStorage o dal sessionStorage, in questo modo:


//SET
var array1 = new Array("Primo", "Secondo", "Terzo");
window.localStorage.setArray("cachedArray", array1);

//GET
array1 = window.localStorage.getArray("cachedArray");