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 rick 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/

Answer 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.

Answer 2

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 1000ths of elements I see no memory problems

Answer 3

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

      from jquery uncompressed:

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

Answer 4

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