jQuery.data

I’ve been familiar with jQuery’s data method for a while now. It’s awesome, allowing you to get and set data with a jQuery object.

$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });

$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}

It’s especially useful within jQuery plugins, providing a mechanism to save the plugin’s state.

While looking over jQuery UI plugin bridge, I found they were using $.data() instead of $.fn.data. Where as $.fn.data is a method for jQuery objects like $('#elem').data('foo', 52), $.data() is a utility function that uses an element as one of its arguments.

$.data( document.body, 'foo', 52);
$.data( document.body, 'bar', { myType: 'test', count: 40 });

$.data( document.body, 'foo'); // 52
$.data( document.body ); // {foo: 52, bar: { myType: 'test', count: 40 }}

Using $.data() can yield better much performance as you don’t have to wrap an element in a jQuery object. Testing on jsPerf, my results had $.data() performing 5x faster than $.fn.data(). Within Isotope, making this change is boosting performance of sorting by 2x.