How does jQuery .data() work?

Question

My Javascript knowledge is pretty limited.

Instead of asking several javascript questions I got the "message" from Stack overflow and started using jQuery right away in order to save me some time.

However several times I do not undestand the "magic" behind jQuery and I would love to learn the details.

I want to use .data() in my application. The examples are very helpful. I do not understand however WHERE these values are stored.

I inspect the webpage with Firebug and as soon as .data() saves an object to a dom element, I do not see any change in Firebug (either HTML or Dom tabs).

I tried to look at jQuery source, but it is very advanced for my Javascript knowledge and I lost myself.

So the question is:

Where do the values stored by jQuery.data() actually go? Can I inspect/locate/list/debug them using a tool?

Answer 1

$(document).data() is one placed ive stored it

Answer 2

Have a look at the source for it.

From a quick glimpse, it looks like it's storing the data in that cache variable that is created on line 2.

Edit:

Here's a quick demo that finds the data in the cache: http://jsfiddle.net/CnET9/

You can also dump $.cache to your console and explore it manually.

Answer 3

You can inspect it by just calling .data() without params, like this:

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

As for the "where", it's stored in a global jQuery cache object under a key that represents your element. Calling .data() really returns jQuery.data(yourDomElement), or tack on a key to that if you called for a specific value from it.