Is there an advantage in how I store my data using jQuery?

Question

I know understand more about how jQuery stores data.

Is there any advantage to doing one or the other of these:

$(\'#editCity\').data(\'href\', \"xx\");         


        

Answer 1

Storing property values directly on DOM elements is risky because of possible memory leaks. If you're using jQuery anyway, the .data() mechanism is a wonderful and safe way to keep track of per-element information. It allows for storage of arbitrary JavaScript data structures too, not just strings.

edit — when your HTML markup contains data-foo attributes, those are implicitly read when the keys are accessed. That is, if your HTML looks like this:

<div id="div1" data-purpose="container">

Then in jQuery:

alert( $('#div1').data('purpose') ); // alerts "container"

Furthermore, jQuery will also do some "smart" analysis of the attribute values. If a value looks like a number, jQuery will return a number, not a string. If it looks like JSON, it de-serializes the JSON for you.

edit — here's a good trick: in the Chrome developer console (the "Console" view), you can type JavaScript expressions and have them evaluated. The evaluation is always done in the context of the page you're working on. If you select an element from the "Elements" view, then in the console the JavaScript symbol $0 will refer to that selected DOM element. Thus you can always inspect the "data" map for an element by going to the console and typing something like:

$($0).data("something");

The .data() function, if called with no parameters, returns all the key/value pairs:

$($0).data();

Answer 2

The most interesting point about the data function is that you can add any kind of object, for example your modal. And jQuery, as stated in the documentation, take care of avoiding memory leaks when the DOM changes :

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.

For strings, memory leaks aren't possible but the main difference is that the first solution is cleaner (more coherent if you might store other data than strings in other parts of your application), clearer (the intent is evident), and doesn't force CSS calculation (DOM isn't changed).

Answer 3

They both have advantages... That said, 99% of the time you should be using .data('whatever', value)

Advantages of using .data('whatever', value):

• less apt to cause memory leaks because it's not using the DOM.
• Slightly faster to pull data from memory than from the DOM.
• Can put any type of object in it without serializing it to JSON first.

Advantages of using .attr('data-whatever', value):

• compatible with .data('whatever')
• allows you to select the element by the value: $('[data-whatever=foo]')
• You can put any object in it, but it will need to serialize if it's a complex type.