2

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

例如，如果我回去，我应该去一个列表，但是如果按下按钮，它应该带我回到播放器页面，并显示我从页面上的 ajax 请求和正确的 URL 获得的所有内容。如何才能做到这一点？

4

1 回答 1

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/

这里提到的所有内容以及更多内容都可以在我的其他文章或这里找到。只需搜索名为：Data/Parameters storage between page transitions的章节

于 2013-03-28T19:02:24.137 回答