Phonegap : losing data on first page after navigating back to first page

Question

Phonegap, writing app for Android. Here is what my app supposed to do :

1) onDeviceReady, read xml ( item names and corresponding hyperlink for each item - so kind of Table of contents) and show them on index.html

onDeviceReady: function () {
    app.receivedEvent('deviceready');
    var readStatus = sessionStorage["readComplete"];
    alert("readComplete = " + readStatus);
    if (readStatus != "true") {
        app.readxml();
        sessionStorage["readComplete"] = "true";
    }
},


In app.readxml() I read all items + links in my datafile(XML) and add them to a ordered list in a div of Index.html page.

onDeviceReady seems to be getting called each time page loads ( like navigating back). Reading same page for each page load and rebuilding seems redundant since once we read, the page should remember how it was built and controls have their old data in them.So, I store the reading xml status in sessionStorage so that i dont readxml and rebuild page each time.

2) when user clicks on a link in the list, navigate them to a page1.xml 3) when clicks back button, bring them back to Index.html

Problem at #3 --> when user comes back to first page ( index.html), at that time readStatus == true, the Index.html is showing blank.

Question --> how can I maintain state of index.html ( with data populated from reading xml) so that I dont have to rebuild page on each navigation back.

Any help is appreciated.

Answer 1

Whenever you open a new link (page.html) in Cordova, the previous page (index.html) will be destroyed, this behaviour depends on the system, iOS will sometimes cache previous pages and Android seems to always clear data right away.

If you want to avoid reloading the XML data, you can save it into the sessionStorage or localStorage (JSON is a good format). But the DOM has to be re-built whenever you go back to index.html, there will be a minor delay still.

A quick workaround to your problem could be creating an iframe within index.html to load page.html. Or a floating DIV layer on top of index.html using Ajax to load page.html. Both approach will work fine, assuming your index.html and page.html isn't too resource consuming.

Answer 2

data-dom-cache="true" 

use this in your html tag. for more infromation follow this... http://demos.jquerymobile.com/1.2.0/docs/pages/page-cache.html