Ad un certo punto, tutti noi dobbiamo memorizzare qualche set di dati sul client. Possiamo memorizzare lo spazio dei nomi di variabili sempre in maggiore quantità evitando collisioni; possiamo memorizzare le variabili in qualche oggetto locale che stiamo usando per la normale esecuzione del nostro script; possiamo associare attributi personalizzati ai nodi dell’HTML, violando la sacrosanta purezza dello XHTML.

Oppure possiamo allegare le variabili con delle specifiche, nello script (in modo da mantenere i validatori automatici felici) del documento stesso. Questo approccio abbastanza intuitivo non è stato dato l’importanza che merita.

Alcuni vantaggi
  • Possono essere assegnati nomi arbitrari per i valori e si possono assegnare, come queste, praticamente quanti ne vogliamo.
  • Possono essere applicate direttamente a jQuery che può accedere, il che significa che siamo in grado di assegnare dei valori rapidamente a interi set di nodi DOM, senza dover aggiungere classi CSS o memorizzarlo nel markup.
  • Possono essere dinamicamente aggiunti, accessibili, modificati e rimossi a piacimento, senza trasferimenti di rete.

L’unico svantaggio è che non sono persistenti attraverso il caricamento della pagina, ma abbiamo vissuto con questo problema per un lungo, lungo tempo, non è vero?
Quindi, come possiamo utilizzare questo metodo a portata di mano? La documentazione è abbastanza chiara, ma risolvo con un esempio un po’ più a terra:

Un HTML molto semplice per questo esempio:
[code lang=”html”] <body>
<div>
<span id="conto"></span>
<button id="aggiungi">Aggiungi punto</button>
<button id="resetta">Resetta punti</button>
</div>
<div id="dati"></div>
</body>
[/code]
Il codice JavaScript è altrettanto intuitivo
[code lang=”javascript”] punteggi = {
aggiungiPunto: function() {
var dat = this.prendiDati();
dat[dat.length] = Math.floor(Math.random()*101);
$(‘#dati’).data(‘punti’, dat);
},
resettaDati: function() {
$(‘#dati’).removeData(‘punti’);
},
dimensioneDati: function() {
var dat = this.prendiDati();
return dat.length;
},
prendiDati: function() {
var dat = $(‘#dati’).data(‘punti’);
if (undefined == dat) return [];
if (Array != dat.constructor) return [dat];
return dat;
},
aggiornaSchermo: function() {
$(‘#conto’).text(‘Click: ‘ + (lim = this.dimensioneDati()));
var tmp = ”;
var dat = this.prendiDati();
for (var i = 0; i < lim; i++) {
tmp += dat[i];
if (i < lim – 1) tmp += ‘,’;
}
$(‘#dati’).text(‘[‘ + tmp + ‘]’);
}
}

$(document).ready( function() {
punteggi.aggiornaSchermo();
$(‘#aggiungi’).bind(‘click’, function(e) {
punteggi.aggiungiPunto();
punteggi.aggiornaSchermo();
});
$(‘#resetta’).bind(‘click’, function(e) {
punteggi.resettaDati();
punteggi.aggiornaSchermo();
});
});
[/code]

In questo esempio, si memorizza tutto come un array in punti. Mentre qui si memorizza numeri interi generati in modo casuale, si può altrettanto facilmente memorizzare interi oggetti, aprendo la possibilità a una soluzione con JSON.
Da notare che possiamo identificare gli oggetti dove manca l’attributo scelto in modo dinamico come undefined.
Demo live