jquery - 即使我离开然后使用 Jquery 返回页面，如何将内容保留在页面上

Question

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

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

Answer 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);
});

This will only work on multi html page format.

解决方案 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 。只需搜索名为:页面转换之间的数据/参数存储

的章节