Jquery .data() method

[JohnBohnam]

Hello. I want to ask about the .data() method. As you know data() method allows store arbitrary data associated with Dom elements. But how does it work? Is there any documentation about this feature. And how many browsers support this technology?

[rnd me]

the new version (1.4+) uses HTML5's data-attribs to store text data.

the old version used a proprietary property on on the element object that held a key that identified a slot on the jQuery object (don't remember where) that held the actual data the property was something like jquery54353453 and was set to null i think...


jquery works on all browsers, but the .data feature is not really that impressive; there's certainly other ways to store data on element objects, named javascript properties are the simplest and most compatible. the new versio is a nice way to pull in all the data-attribs in new and old browsers.

[JohnBohnam]

Thank you rnd_me but what's about performance?
If I'll use $.data() very often will I get low site performance?

[rnd me]

using any dom methods will lower performance compared to jsObject access.

however, given that many and increasing browsers natively support the data- attribs using the dataset api, it should be fast.

jQuery should use the native api if available, so it should be fast, and even the attrib-based api is fast as of 1.5...


aside from that, you can get the fastest performance by using IDs to reference a lookup table of values.

here's a basic example, not that there is no dom methods being used, not even getElementById... The one dom property (id) is also a native dom0 binding, so it should be pre-populated when the element is created, thus elm.id should be as about as fast as a native jsObject property access. In sum, it's the fastes way to do this type of thing.

<div id='d1' onclick="alert(myData[this.id].name)">d1 name</div>	
<div id='d2' onclick="alert(myData[this.id].isDirty)">d2 isDirty</div>	
<div id='bob' onclick="alert(myData[this.id].name)">bob name</div>	
<div id='sally' onclick="alert(myData[this.id].age)">sally age</div>	

<script>
	myData={
		d1: {name: "Cell One", isDirty: false },
		d2: {name: "Cell Two", isDirty: true },
		bob: {name: "Robert McNamara", age: 25 },
		sally: {name: "Sally Hemmings", age: 42  }
	};
</script>

[JohnBohnam]

Thank's for the reply!
Good luck!