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

Posted 2023-03-15

【中文标题】即使我离开然后使用Jquery返回页面，如何将内容保留在页面上

【英文标题】：How keep content on a page even when I leave then return to the page with Jquery

【发布时间】：2013-03-28 18:06:29

【问题描述】：

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

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

【问题讨论】：

保存状态到浏览器的local storage

太好了，那我怎么保存状态

我知道我可以将值复制到本地存储中，但是我如何告诉应用程序从本地存储中提取而不是 ajax 调用。

【参考方案1】：

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

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

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

参考：https://***.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：

作为最后一个解决方案，我们有一个漂亮的本地存储 HTML 实现。它仅适用于 HTML5 浏览器（包括 android 和 ios 浏览器），但所有存储的数据通过页面刷新保持不变。

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

例如：http://jsfiddle.net/Gajotres/J9NTr/

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

的章节

【讨论】：

这对我来说似乎是前进的方向，谢谢，我会尽快实施

一个问题，如果我从播放器页面返回到列表页面，但尝试通过 url http://domainname/page 返回播放器页面，beforepageshow 函数将再次触发但我没有不想发生。我想存储指向实际数据的链接，但不重新加载所有数据。

想想播放器页面上正在播放的歌曲，您在播放器页面上按返回可转到上一个歌曲列表。然后您决定继续前进，这将使用户返回播放器页面。这很好，但您不希望歌曲停止播放，而是希望它按原样继续播放

那么你需要使用某种 if 语句来检查内容是否已经加载。或者你应该使用 pageinit 而不是 pagebeforeshow 事件，它只会触发一次。

我尝试了pageinit，但由于某种原因，它没有及时获取 url 的 id，所以它通过 ajax 什么都不加载