How does jQuery store data with .data()?

Question

I am a little confused how jQuery stores data with .data() functions.

Is this something called expando? Or is this using HTML5 Web Storage although I think this is very unlikely?

The documentation says:

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

As I read about expando, it seems to have a risk of memory leak. Unfortunately my skills are not enough to read and understand jQuery code itself, but I want to know how jQuery stores such data by using data().

http://api.jquery.com/data/

score 18 · Accepted Answer · edited Apr 18 '13 at 10:03

Basically jQuery holds the information you store/retrieve with data(name, value)/data(name) and remove with removeData(name) in an internal javascript object named cache. The rest is just a bit of javascript magic to make it work and keep all the associations right.

Oh and to answer the first part of your question. Neither is it expando nor HTML5 WebStorage.

To correct myself I think jQuery does use expando in one occasion. It sets one attribute on those elements you used data() on to store information to them. The attribute name looks like this

"jQuery" + now() //e.g. jQuery1268647073375

btw. now() is an internal function which returns (new Date).getTime()

and the value is an UUID generated by jQuery.

This way jQuery later on can retrieve the correct associated data from it's internal cache.

So if you are concerned about expando in IE, where I recall you can't delete them, then the leak should be minimal as jQuery only uses 1 expando per element you store data on. Unless you call data() on literally 1000s of elements I see no memory problems

score 1 · Answer 2 · answered Mar 15 '10 at 09:49

1

Function data in jQuery.fn.extend is using this statement to save provided variable:

jQuery.cache[ id ][ name ] = data;

jQuery.cache is just a standard object, defined as cache: {}, inside jQuery namespace.

So answering your question - I believe jQuery stores data in standard, internal JavaScript object called cache.

Oh, and regarding your memory leak question - I really don't know. If JavaScript has some troubles storing references to DOM elements in standard JS object this might be an issue.

answered Mar 15 '10 at 09:49

Piotr Rochala

7,748
2
33
54

What version is this from. In 1.4.2 there is no such line? – jitter Mar 15 '10 at 09:51
1

and btw, even jQuery 1.4.2 is using internal object called cache, so the asnwer is still valid. Slightly different syntax, but same answer. – Piotr Rochala Mar 15 '10 at 09:54
I know that it still works similar to this in 1.4.2 I was looking myself at the 1.4.2 version and wondered if I skipped this line somewhere. I know your answer is still very valid – jitter Mar 15 '10 at 10:00

score 0 · Answer 3 · answered Mar 15 '10 at 09:56

0

Also check out the metadata plugin - it extracts metadata from a DOM Element and returns it as an object (discussed in comments here).

answered Mar 15 '10 at 09:56

Andy

17,423
9
52
69

score -4 · Answer 4 · answered Mar 15 '10 at 09:51

-4

Its put into cache by the browser locally much like a cookie

      from jquery uncompressed:

 if ( data !== undefined ) {
            thisCache[ name ] = data;
        }

answered Mar 15 '10 at 09:51

jason

1,132
14
32

How does jQuery store data with .data()?

4 Answers4

Linked