即使我离开时如何在页面上保留内容然后返回到Jquery页面

时间:2013-03-28 18:06:30

标签: jquery jquery-mobile local-storage

目前我有一个用Jquery Mobile创建的页面,页面上的内容是根据URL http://domainname/page?id=2形成的。当使用此jquery语句beforepageshow触发页面事件$(document).on( "pagebeforeshow", "#player", function( e )时,我获取内容的方式是ajax请求。这很好,但是我想知道即使我离开页面也能保留这些内容。

例如,如果我回去,我应该去一个列表但是如果按下按钮它应该带我回到播放器页面并显示我从页面上的ajax请求获得的所有内容和正确的URL。怎么办呢?

1 个答案:

答案 0 :(得分:1)

有几种方法可以实现。您需要存储数据或在页面转换期间移动它。以下是一些可能的解决方案:

存储页面转换之间的数据/参数

可以在页面转换期间从一个页面向另一个页面发送参数。它可以通过几种方式完成。

参考:https://stackoverflow.com/a/13932240/1848600

解决方案1:

您可以使用changePage传递值:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

并按照以下方式阅读:

$("#index").live('pagebeforeshow', function () {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");  
    alert(parameter);
});
  

这只适用于多种html页面格式。

解决方案2:

或者您可以为存储目的创建持久性javascript对象。只要ajax用于页面加载(并且页面不以任何方式重新加载),该对象将保持活动状态。

var storeObject = {
    firstname : '',
    lastname : ''
}

示例:http://jsfiddle.net/Gajotres/9KKbx/

解决方案3:

您还可以访问上一页的数据,如下所示:

$('#index').live('pagebeforeshow', function (e, data) {
    alert(data.prevPage.attr('id'));
});   

prevPage 对象包含完整的上一页。

解决方案4:

作为最后一个解决方案,我们有一个漂亮的localStorage HTML实现。它仅适用于HTML5浏览器(包括Android和iOS浏览器),但所有存储的数据都通过页面刷新保持不变。

if(typeof(Storage)!=="undefined") {
    localStorage.firstname="Dragan";
    localStorage.lastname="Gaic";            
}

示例:http://jsfiddle.net/Gajotres/J9NTr/

此处提及的所有内容以及其他内容都可以在我的其他 ARTICLE HERE 中找到。 只需搜索名为在页面转换之间存储的数据/参数

的章节