jQuery: Data Caching Tips to Improve Performance

In this section, I’ll cover different ways of storing data. Data caching can be really helpful in improving the performance of your web applications. So read carefully.

Different Ways of Storing Data

Don't Use Attributes
Before the days of jQuery, a common practice was to store additional data in your DOM by adding custom attributes to your elements. You might see developers creating their own attributes or reusing less used attributes such as alt or title. This approach has several problems. If you create your own attributes, your code is not XHTML compliant, and if you reuse an attribute, you’re using one that really isn't intended for that purpose. Here’s an example:

//Storing special information about the anchor in the alt attribute
$('a').attr('alt', 'Special info about this HTML tag');

//Getting the special information from the anchor's alt attribute
$('a').attr('alt')

Utilizing the jQuery data Function

A much better way to store information for a particular HTML element is to use the jQuery data function, shown here:

//Storing data in anchor tag
$('a').data('specialInfo', 'Special info about this HTML tag');
//Retrievind data from anchor tag
$('a').data('specialInfo');

Not only are you not reusing an attribute that wasn't intended to hold additional information, but you are also able to name the key without jeopardizing XHTML compliance. Another great feature of the data function is that it doesn’t limit you to string data, which you are when you store data inside an attribute. You can store complex data structures inside the data function and then retrieve them again. You should note that by using this approach, you can't store data directly in the HTML element at design time. Here’s an example of storing a complex data structure:

//Storing a complex data structure under the specialInfo key
$('a').data('specialInfo', {
   firstName: 'Elijah',
   lastName: 'Manor'
});
//Getting the complex data structure specialInfo & accessing the firstName property
$('a').data('specialInfo').firstName;

Actually, you can use a different syntax to store and retrieve information using the datamethod that is faster than using the key/value approach. Here's an example:

$("li.demo").data({ firstName: "Elijah", lastName: "Manor" });

console.dir($("li.demo").data());

$("li.demo").data("someKey",
 { firstName: "Andrea", lastName: "Manor" });

console.dir($("li.demo").data());

console.log($("li.demo").data().someKey.firstName);

If you want, you can use both syntaxes at the same time. As the preceding example shows, you can attach an object literal directly to the data method and then add more data using the key/value syntax. Both pieces of information will be attached to the DOM element. When retrieved by using the data method, the result will look something like the following screen shot, which shows the output from the preceding code. Notice that you can reference the key you attached previously with a string and use that as a property name off of the result from data.