Jquery data() storage

Question

Can any one tell me where jquery data() stores the data and when it is get erased and how?

Is there any performance issue if I use this to store ajax call result?

For example:

$("body").data("test", { myData: 'abcd'});

Aegrotat

it is stored at the client side only , i was using jquery data and jquery meta data plugins to retrive the data and never ran into any problem – Pandorapandour

Answer 1

see the content from jquery

The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks. jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page. We can set several distinct values for a single element and retrieve them later:

Pandorapandour

thanks @gov. But in the following article apheliondynamics.com/blog/2010/01/19/… it is mentioned that data() stores the content in cache. So I was confused when actually the cache is cleared ! – Aegrotat

@Aegrotat go to this page , art.com/gallery/id--c23944/… and do a view source and check for hiddenvalues , then clear caches from your browser, still you can see the values/// they are stored as a part of dom structure it selef, i don't think they are stored in cache... – Pandorapandour

Answer 2

All data is stored inside a property of the jQuery object named cache. Log the contents of $.cache in your console to see all data and events associated with any DOM element.

The way jQuery links up a DOM object with an object in this cache is by manipulating the DOM object. Say we have a input element

<input type="text" value="hello" />

which has a data key named "foo"

$(e).data("foo", "bar");

Now jQuery maintains a random string of the form jQuery<current time in ms>, for example, jQuery1291790929680, which is also accessible by $.expando. jQuery adds this expando string as a key to each DOM object that has an associated data item or event. So the DOM object for the above input element will contain this expando key with some integer value such as:

jQuery1291790929680: 4

4 is just a random example, but this number denotes an index in the $.cache object, where the associated data and events for this DOM object are stored. So given this information, to retrieve the data of the above input element, we can indirectly write:

$.cache[4]["foo"]

which should return "bar", which is an indirect way of writing $(e).data("foo").

An illustrated example of the above nonsense :)

Handball

I am really grateful for your explanation. – Aegrotat