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:
<body>
  <div>
    <span id="conto"></span>
    <button id="aggiungi">Aggiungi punto</button>
    <button id="resetta">Resetta punti</button>
  </div>
  <div id="dati"></div>
</body>
Il codice JavaScript è altrettanto intuitivo
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();
 });
});
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
⤽