A couple of notes: if you care about performance, use $.data(), i.e. instead of $('body').data(key, value) use $.data(document.body, key, value).

Also .data() lets you access HTML5 data-* attributes. Note, that doing so values are converted to proper objects if possible. See http://jsfiddle.net/wLfJV/1/

Unrelated, but worth reminding: don't use $(this).attr('id')— this.id is simpler and much much faster: http://jsperf.com/el-attr-id-vs-el-id/2

performance: thanks, you are right. i read something right after posting. i think it was written by Paul Irish. thanks again for the performance tips.

html5 data: those are the attributes that i was referring to in the beginning of the post.

Can anybody clarify the last line of the blog article [1]? The author makes it sound like storing data using $.data() is an async operation. The API docs make no mention of this. In some quick tests using Chrome, I was always able to immediately retrieve the value that was stored.

I'm actually planning on using this method, so I'd really like to know.

[1] "Furthermore, storing data takes a certain amount of time, so you might get a null exception if you are planning on retrieving it right after storage. There are currently no plans to add a callback to the jQuery data that I’m aware of."

Edit: $.data() seems to be async, but $(el).data() is not. At least that's what I found. Maybe that explains the difference in speeds.

I like to maintain a clean namespace, which means that generally, instead of recording data on DOM objects, I wrap it in closures. For those circumstances where I absolutely cannot do that (and it is rare), I try to be as local as I can and use a wrapper name...

    DOMObject.my_special_site_id.specific_data1
    DOMObject.my_special_site_id.specific_data2

Nasty global variableses...

thanks. will keep that in mind.

Another good option is Linq -- it's great for storing lots of data. We use it here with backbone. We're using this one: http://linqjs.codeplex.com/

What template system are they using?

Looks like http://www.liquidmarkup.org/

Could also just be mustache.

the syntax is similar to mustache. it was purely meant to help with the rest of the code explanation. think of it as pseudo-coding.