Using jQuery's datastore vs. expando properties

Question

I'm developing code using jQuery and need to store data associated with certain DOM elements. There are a bunch of other questions about how to store arbitrary data with an html element, but I'm more interested in why I would pick one option over the other.

Say, for the sake of extremely simplified argument, that I want to store a "lineNumber" property with each row in a table that is "interesting".

Option 1 would be to just set an expando property on each DOM element (I hope I'm using the term 'expando' correctly):

$('.interesting-line').each(function(i) { this.lineNumber = i; });

Option 2 would be to use jQuery's data() function to associate a property with the element:

$('.interesting-line').each(function(i) { $(this).data('lineNumber', i); });

Ignoring any other shortcomings of my sample code, are there strong reasons why you would choose one means of storing properties over the other?

Answer 1

If you are authoring a plugin you should use $.data. If you need to store the attribute often and rarely need to query the DOM for it then use $.data.

Having said that for all my client applications I tend towards storing custom DOM attributes on the DOM element themselves so that I can query them later using the attribute [] selector:

var domElement = $('.interesting-line[lineNumber=' + lineNumber + ']').get(0);

This is much more readable than iterating the wrapped set calling .data() on each item. Often I am inter-oping with another 3rd party library that operates on a DOM element so having quick and easy access to the DOM element via this mechanism keeps the code readable.

It's as easy as storing a lookup table mapping lineNumbers to elements, however the expando attribute technique is less at-risk of leaking memory in comparison, since you are not storing references to DOM elements that you need to cleanup later.

Update 5 years later Just read this after it received a [well deserved] downvote: please ignore the striked text above. jQuery does not query the DOM based on expando properties set, and hasn't done so for a while. So use $.data. There's no reason to pollute the DOM when there is no pragmatic use to do so.

Answer 2

Using $.data will protect you from memory leaks.

In IE, when you assign a javascript object to an expando property on a DOM element, cycles that cross that link are not garbage collected. If your javascript object holds a reference to the dom object, the whole cycle will leak. It's entirely possible to end up with hidden references to DOM objects, due to closures, so you may leak without realizing it.

The jQuery datastore is set up to prevent these cycles from forming. If you use it, you will not leak memory in this way. Your example will not leak because you are putting primitives (strings) on the DOM element. But if you put a more complex object there, you risk leaking.

Use $.data so you won't have to worry.

Answer 3

Using $.data doesn't modify the DOM. You should use $.data. If you're creating a plugin then you should store one object in $.data with properties on that object as opposed to storing each of those properties as different key/value pairs in the $.data structure.