2014-12-15 2 views
1

У меня есть несколько страниц JQM и вам нужно получить идентификатор активной страницы, который уже сохранен, и добавить его как ссылку на кнопку на первой странице.Извлечение значения из локального хранилища HTML5

Я пытаюсь добиться «продолжения» функции, которая позволяет вам не потерять ваш прогресс.

В приведенном ниже примере мне удалось сохранить идентификатор активной страницы, и всякий раз, когда страница обновляется, вы получите предупреждение с сохраненным идентификатором последней страницы (в первый раз он будет предупреждать #null причину, чтобы в то время не сохранялся идентификатор) ,

Это в основном нормально, но я не могу показаться, чтобы сделать этот идентификатор в качестве ссылки кнопки, даже если я попытался $("#resume").attr("href", resume);

Я храню идентификатор с помощью этой кнопки:

<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: Я не думаю, что это имеет отношение к этому, но я собираюсь превратить это в приложение Android с помощью XDK.

+0

Я хотел бы посмотреть в использовании Amplify.store для LocalStorage потребностей: http://amplifyjs.com/api/store/ – fuzzybabybunny

+0

@fuzzybabybunny хорошо, спасибо за но я не вижу смысла использовать плагин для чего-то такого простого. – Alin

+0

Различные браузеры используют разные apis для своего локального хранилища. Приятно использовать одну базу кода, которая заботится обо всех различиях для вас, иначе вы можете вводить множество разных версий одного и того же кода для разных браузеров. – fuzzybabybunny

ответ

1

Полезно использовать pagecontainer событий для хранения данных. В вашем случае используйте pagecontainerhide, чтобы сохранить идентификатор страницы, на которую вы переходите на toPage. И затем используйте pagecontainershow для обновления кнопки href.

В случае, если сохранен 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