从HTML5本地存储中检索值

Question

I have multiple JQM pages and in need to retrieve the active page ID i already stored and add it as a link to a button on the first page.

I am trying to achieve a "continue" function that allows you to not lose your progress.

In the example below I managed to store the active page ID and whenever the page is refreshed you will get an alert with the last page ID stored (first time it will alert #null cause no id is stored at the time).

It's basically ok but i can't seem to make that ID as the button link even though I tried $("#resume").attr("href", resume);

I am storing the ID with this button :

<a href="#" data-role="button" onclick='storageValue();'>Store</a>

And this is the function I have so far:

    function storageValue() {
    var stored = $.mobile.pageContainer.pagecontainer("getActivePage").attr('id');
    alert("Your stored id is: " + stored);

    localStorage.setItem('stored', stored);
    checkLocalStorage();


}
var test = localStorage.getItem('stored');
var resume = "#" + test;
alert("Your stored id is: " + resume);

checkLocalStorage();

Optional: It would have been ideal if I didn't need to click a button to store the page. The page should be stored automatically when becoming active.

Here is a JSFIDDLE that will allow you to test/debug faster.

PS: I don't think it's of any relevance to this but I am going to turn this into an android app using XDK.

Answer 1

It's more practical to use pagecontainer events to store data. In your case, use pagecontainerhide to store ID of page you're navigating to toPage . And then, use pagecontainershow to update button's href .

In case stored ID is equal to first page's ID, the button will be hidden.

$(document).on("pagecontainerhide", function (e, data) {
    var stored = data.toPage.attr('id');
    localStorage.setItem('stored', stored);
}).on("pagecontainershow", function (e, data) {
    if (data.toPage[0].id == "firstpage") {
        var test = localStorage.getItem('stored');
        var resume = "#" + test;
        $("#resume").attr("href", resume);
        if (test == "firstpage") {
            $("#resume").fadeOut();
        } else {
            $("#resume").fadeIn();
        }
    }
});

Demo

If you want to navigate directly to last visited page, listen to pagecontainerbeforechange and alter toPage object.

$(document).on("pagecontainerbeforechange", function (e, data) {
    if (typeof data.toPage == "object" && typeof data.prevPage == "undefined" && typeof localStorage.getItem('stored') != "undefined") {
        data.toPage = "#" + localStorage.getItem('stored');
    }
});

Demo