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

Answer 1

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