¿Cómo funciona jQuery .data()?

Question

Quiero usar .data() en mi aplicación. El examples es útil, pero no entiendo, sin embargo, dónde se almacenan los valores.

inspecciono la página web con Firebug y tan pronto como .data() guarda un objeto a un elemento DOM, no veo ninguna cambio en Firebug (HTML o pestañas Dom).

Traté de ver la fuente de jQuery, pero está muy avanzado para mi conocimiento de Javascript y me perdí.

Así que la pregunta es:

¿Dónde los valores almacenados por jQuery.data() en realidad ir? ¿Puedo inspeccionar/ubicar/enumerar/depurar usando una herramienta?

Answer 1

Eche un vistazo a source para él.

De un vistazo rápido, que parece que es el almacenamiento de los datos de esa cache variable que se crearon en la línea 2.

Editar:

He aquí una demostración rápida que encuentra los datos en la memoria caché : http://jsfiddle.net/CnET9/

También puede volcar $.cache en su consola y explorarlo manualmente.

Answer 2

Puede inspeccionarlo con sólo llamar .data() sin parametros, como esta:

$("div").data("thing", "value");​​​​​​ 
console.log($("div").data()); 
//or... 
console.log($.data($("div").get(0))); 

En cuanto a la "dónde", se almacena en caché un objeto global jQuery en una tecla que representa su elemento. Llamar al .data() realmente devuelve jQuery.data(yourDomElement), o marcar una clave para eso si solicitó un valor específico.

Answer 3

Parece que ha obtenido la respuesta a dónde, pero aquí está un poco sobre cómo. Existen algunas reglas que debe tener en cuenta antes de usar esto.

SUMAR

Adición de variables utilizando el objeto de regresar de $ ('Selector'). Data() funciona porque el objeto de datos pasa por referencia, por lo que en cualquier lugar de agregar una propiedad, se agrega. Si llama a data() en otro elemento, se cambia. Es lo que es lo que es ...

var oData = $('#id').data(); 
oData.num = 0; 
oData.num == $('#id').data().num; // true 

Adición de un objeto coloca un objeto en el interior del objeto de datos, así como "se extiende a los datos almacenados previamente con ese elemento." - http://api.jquery.com/data/#entry-longdesc

Eso significa que la adición de un obj a dataobj convierte

oData.obj = {};  
oData === { /*previous data*/, obj : { } } 

Adición de una matriz no se extiende a los datos almacenados previamente, pero no se comporta igual que un valor sea sencilla ...

USO

Si tiene valores simples almacenados, puede colocarlos en variables y hacer lo que quiera con ellos sin cambiar el objeto de datos.

embargo

si está utilizando un objeto o una matriz para almacenar los datos en un elemento, ¡cuidado!

El hecho de que la almacene en una variable no significa que no cambie el valor de los datos. ¡El hecho de que lo pase a una función no significa que no cambie los valores de los datos!

Es lo que es lo que es .. a menos que sea simple ... entonces es solo una copia. : P

var data    = $("#id").data(); // Get a reference to the data object 
data.r_redirect  = "index.php";  // Add a string value 
data.num    = 0;    // Add a integer value 
data.arr    = [0,1,2];   // Add an array 
data.obj    = { a : "b" };  // Add an object 

             // but here is where the fun starts! 

var r_redirectString = data.r_redirect; // returns "index.php", as expected.. cool 
r_redirectString  = "changed"   // change the value and the compare : 
data.r_redirect  == r_redirectString // returns false, the values are different 

var oArr    = data.arr;   // Now lets copy this array 
oArr.push(3);       // and modify it. 
data.arr   == oArr    // should be false? Nope. returns true. 
             // arrays are passed by reference. 
             // but.. 

var oObj    = data.obj   // what about objects?  
oObj["key"]   = "value";   // modify the variable and 
data.obj["key"]  == oObj["key"]  // it returns true, too! 

Por lo tanto, los recursos ..

What's the best way to store multiple values for jQuery's $.data()? https://stackoverflow.com/a/5759883/1257652