Does jQuery's .data() cache persist across pag

Question

I was just reading the jQuery .data() API reference. Beforehand, I speculated that it might work by assigning 'data-*' attributes to page elements; effectively a shortcut to $('#foo').attr('data-foobar', 'bar').

(1) Imagine it did work like this, though it seems it doesn't, and you switched from one jQuery Mobile page to another and then back again, would the 'data-*' attributes still be attached to the elements, or does jQM effectively reload from the downloaded HTML?

In the reference, however, the first comment on the page states that:

The data is not stored on the element. It's actually stored in $.cache - "Alex"

(2) Is this true?

(3) Does this persist across jQM page transitions? If I click on page 2 and ask $('#bar').data('foo'), where #bar is a div on page 1, what will happen?

Would you say it was preferable to use .data('*','*') instead of .attr('data-*','*') in the context of a jQM app, with all content in one HTML file, running on top of Cordova/PhoneGap in a situation where only localStorage is available for extra-app storage?

Specific, yes. Slightly anal, yes.

Looking forward to your answers, yes.

Answer 1

If your using the multi-page template where you have multiple data-role="page" elements in a single document, then the data will persists through transitions. This is because all of the pages are always in the DOM and they are never removed from the DOM.

Now, when you pull-in a pseudo-page via AJAX, it's a different story. When you link to a remote page, jQuery Mobile grabs the page via AJAX and then transitions it into view. By default, when you leave that page it will be removed from the DOM to save memory. When the page is removed, so is its data. You can stop this behavior by setting the data-cache="true" attribute on any external data-role="page" elements.

Docs: http://jquerymobile.com/demos/1.1.0/docs/pages/page-cache.html