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

Similari
Iteratori in PHP
6% Php
Iterator è uno dei più noti modelli di progettazione grazie al suo utilizzo in diversi linguaggi di programmazione come Python, Java, C++ e PHP. Fondamentalmente ciò che questo modello propone è di trasferire la responsabi…
Utilizzare il metodo data() di jQuery per memorizzare i dati nel DOM
6% JQuery
Se, per un motivo o un altro, si ha bisogno di archiviare temporaneamente i dati, jQuery ha un metodo .data() per la memorizzazione i dati nel DOM. Questo sistema è preferibile da altri come quando si vuole manipolare i va…
Evitare di usare la variabile $_GET
5% Php
Non è necessario usare più le variabili $_GET o $_POST. In realtà, probabilmente non si dovrebbe usare più $_GET e $_POST. A partire della versione PHP 5.2, c’è un modo nuovo e migliore per recuperare in modo sicuro dati i…
Come disattivare il tasto Invio nei Forms
5% JQuery
Nei form HTML se si sta compilando una casella di testo e si preme il tasto Invio, l’azione invierà i dati compilati nel modulo, anche se non avete finito di riempire il resto delle informazioni. [expand expanded=”true” ex…
La bellezza del Metodo each() di jQuery
5% JQuery
La libreria jQuery fornisce un metodo, each(), che cicla ogni elemento dell’oggetto jQuery di destinazione. [expand expanded=”true” title=”Ciclare tutti i link” excerpt=”⤽” swapexcerpt=”” startwrap=”” endwrap=”” trigclass=…