Comment fonctionne jQuery .data ()?

Je veux utiliser .data() dans mon application. Les exemples sont utiles, mais je ne comprends pas cependant où les valeurs sont stockées.

J’inspecte la page Web avec Firebug et dès que .data () enregistre un object dans un élément dom, je ne vois aucune modification dans Firebug (tabs HTML ou Dom).

J’ai essayé de regarder la source jQuery, mais c’est très avancé pour ma connaissance de Javascript et je me suis perdu.

Donc la question est:

Où vont les valeurs stockées par jQuery.data ()? Puis-je les inspecter / localiser / lister / déboguer en utilisant un outil?

Regardez la source pour cela.

D’un coup d’œil, il semble que les données soient stockées dans cette variable de cache créée sur la ligne 2.

Modifier:

Voici une démonstration rapide qui trouve les données dans le cache: http://jsfiddle.net/CnET9/

Vous pouvez également $.cache sur votre console et l’explorer manuellement.

Vous semblez avoir trouvé la réponse à la question, mais voici un peu comment. Vous devez connaître certaines règles avant de l’utiliser.

AJOUTER

L’ajout de variables à l’aide de l’object renvoyé par $ (‘. Selector’). Data () fonctionne car l’object de données est transmis par référence. Ainsi, chaque fois que vous ajoutez une propriété, elle est ajoutée. Si vous appelez data () sur un autre élément, il est modifié. C’est ce que c’est ce que c’est …

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

L’ajout d’un object place un object à l’intérieur de l’object de données, ainsi que “étend les données précédemment stockées avec cet élément”. – http://api.jquery.com/data/#entry-longdesc

Cela signifie que l’ajout d’un object à dataObj devient

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

L’ajout d’un tableau n’élargit pas les données précédemment stockées, mais ne se comporte pas comme une simple valeur …

EN UTILISANT

Si vous avez des valeurs simples stockées, vous pouvez les placer dans des variables et faire ce que vous voulez sans modifier l’object de données.

toutefois

Si vous utilisez un object ou un tableau pour stocker des données sur un élément, méfiez-vous!

Le simple fait de le stocker dans une variable ne signifie pas que vous ne modifiez pas la valeur des données. Ce n’est pas parce que vous le transmettez à une fonction que vous ne modifiez pas les valeurs de données!

C’est ce que c’est ce qu’il est .. à moins que ce soit simple .. alors c’est juste une copie. : p

 var data = $("#id").data(); // Get a reference to the data object data.r_redirect = "index.php"; // Add a ssortingng 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_redirectSsortingng = data.r_redirect; // returns "index.php", as expected.. cool r_redirectSsortingng = "changed" // change the value and the compare : data.r_redirect == r_redirectSsortingng // 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! 

Donc, des ressources ..

Quelle est la meilleure façon de stocker plusieurs valeurs pour $ .data () de jQuery? https://stackoverflow.com/a/5759883/1257652

Vous pouvez l’inspecter en appelant simplement .data() sans parameters, comme ceci:

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

En ce qui concerne le “where”, il est stocké dans un object de cache jQuery global sous une clé qui représente votre élément. L’appel de .data() renvoie vraiment jQuery.data(yourDomElement) ou jQuery.data(yourDomElement) une touche à cette clé si vous avez demandé une valeur spécifique.