从HTML5本地存储中检索值

时间:2014-12-15 20:11:45

标签: javascript html5 jquery-mobile local-storage

我有多个JQM页面,需要检索已经存储的活动页面ID,并将其添加为第一页上按钮的链接。

我正在努力实现"继续"功能,让您不会失去进度。

在下面的示例中,我设法存储了活动的页面ID,每当刷新页面时,您将收到一个警告,其中存储了最后一页ID(第一次它会提醒#null因为当时没有存储id)。

它基本上没问题,但即使我尝试了$("#resume").attr("href", resume);

,我似乎无法将该ID作为按钮链接

我使用此按钮存储ID:

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

这是我到目前为止的功能:

    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();

可选:如果我不需要点击按钮来存储页面,那将是理想的选择。页面应在激活时自动存储。

这是一个JSFIDDLE,可让您更快地进行测试/调试。

PS:我不认为它与此有任何关联,但我将使用XDK将其变成一个Android应用程序。

1 个答案:

答案 0 :(得分:1)

使用 pagecontainer 事件来存储数据更实际。在您的情况下,使用pagecontainerhide存储您导航到toPage的网页ID。然后,使用pagecontainershow更新按钮的href

如果存储的 ID等于第一页的ID,则该按钮将被隐藏。

$(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

如果您想直接导航到上次访问过的网页,请收听pagecontainerbeforechange并更改toPage对象。

$(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