jQuery differences between .data('key') and .attr('data-key')

Does it also retrieve from the catch even if you had set your browser to not use catch?

Thanks also for sharing your finding.

Yes, it’s unrelated to the browser’s asset cache. By “cache” I simply mean that jQuery’s get and set data() on an DOM element are essentially just getting and setting a Javascript variable attached to the element, with the added convenience of this variable being initialized to whatever happens to be the value of the element’s data-* property, at the time of page load, if any. Multiple data() calls to update the value does not update the corresponding DOM property, however.

This differs from setting the DOM data-* attribute with attr() because doing so almost serves as a visible variable that is being manipulated in the DOM itself.

The conclusion is either always use data() or always use attr() and you can never go wrong, because, in doing so, you’ll always be setting and getting the same variable attached to a DOM element. It’s making the assumption that you’re working with the same variable interchangeably that can cause undesired results.

So I actually just want to clarify something here that I think I might not have explained well.

You can always use data('key', 'foo') to set and then use data('key') to retrieve. You can set, and re-set, and the retrieval will always take the last-set value.

However, if you use the data-key HTML attribute, on page load, that value gets cached as the value for data('key'). You can then use either attr('data-key') to retrieve the value, or you can use data('key') to retrieve the same value. But here's the distinction: If you then update the data-key attribute in the DOM, it doesn't update data() as well. That means that if you update data-key in the DOM, then attr('data-key') will return the updated value, but data('key') will return whatever the value was when the DOM was initially loaded.

Long story short, always use either data-key or always data() but mixing and matching methods might have you ending up with inconsistent results.