从 iPhone 主屏幕重新打开时，如何在 jQuery Mobile 应用程序上缓存并保留上次访问的页面？
Posted
技术标签:
【中文标题】从 iPhone 主屏幕重新打开时，如何在 jQuery Mobile 应用程序上缓存并保留上次访问的页面？【英文标题】：How to cache & persist the last visited page on a jQuery Mobile application, when re-opened from iPhone homescreen? 【发布时间】：2012-02-08 22:41:10 【问题描述】：我有一个简单的 jQuery Mobile 联系人列表应用程序。它为用户提供了将其添加到主屏幕的选项。当他们这样做时，单击电话号码开始通话并再次打开应用程序会将他们带到应用程序的第一页。为了防止这种行为，我添加了以下内容：
$(function ()
//if I am at the start page
if ($.mobile.activePage.attr('data-url') === '/')
var storedPage = localStorage.getItem('jqmPage');
//and I have a stored link
if (storedPage !== null)
//change the page to the stored link
$.mobile.changePage(storedPage);
$(document).bind('pagecreate', function (e)
var url = !!e
? $(e.target).attr("data-url")
: location.pathname + location.search;
//there can be dialog pages - we don't want to return to them
if (url.indexOf('/') !== 0)
return;
localStorage.setItem('jqmPage', url);
);
);
但是，当用户返回应用程序时，页面缓存会丢失，并且该页面上的所有数据（通常应该保持打开状态）都会从服务器重新加载（参见 $.mobile.changePage(存储页面））。有什么办法可以防止这种情况发生吗？还有什么优雅的方法可以达到同样的效果吗？我是否也应该将活动页面 html 也存储在 localStorage 上？如果是这样，我该如何重新激活它？
感谢您的帮助。
编辑：也许我不够清楚。我已经可以将数据存储在 localStorage 上。据我所知，使用 cookie 存储将在每个请求上传输到服务器的 HTML 片段简直是荒谬的。我的问题不是关于如何存储数据。我真正要问的是，通过简单地存储 $(".active-page-class").html() 并在页面不存在时将其放回页面，我想模仿 iPhone 没有的客户端缓存提供基于 ajax 的 jQuery 移动应用程序。这是关于通过 iPhone 主屏幕 访问的应用程序的 jQuery Mobile，正如标签和问题已经说明的那样。
【问题讨论】：
你不能在那个页面上存储数据并重新渲染它吗？ 如果我只是将页面 HTML 推送到正文中并将活动页面类添加到其中，则不会附加事件处理程序。 $.mobile.changePage 处理该问题（考虑到您的页面元素是之前插入的，并且与您要导航到的 url 具有相同的 data-url）但会弄乱 HTML（不是从服务器加载页面时，但是 - 否则 jQuery移动设备根本无法使用） 基于网络，cookie 应该是一种选择。 Cookies 绝对有帮助。有很多 jQuery cookie 插件可以帮助您。看看这个插件cookies。 【参考方案1】：我不认为你可以同时拥有它。您不能让基于 URL 的应用程序和将您的 HTML 存储在缓存中。只要您说“转到此 URL”，浏览器（甚至是无框架的 Web 应用程序）就会接管。你不能告诉它，“但改用这个 HTML”。
现在，如果您的应用更多地由 javascript 驱动并且是动态创建的（我建议将其用于移动网络应用），那么这很容易，因为更改页面并不涉及更改 URL。您可以使用如下模式：
$( function ()
var lastPageName = window.localStorage.getItem( 'lastPageName' ),
lastPageData = window.localStorage.getItem( 'lastPageData' );
if ( lastPageName )
loadPage( lastPageName, lastPageData );
else
loadPage( "home" );
;
);
function loadPage( name, data )
var pageData;
if( data )
pageData = data;
else
pageData = loadPageData( name );
window.localStorage.setItem( 'lastPageName', name );
window.localStorage.setItem( 'lastPageData', pageData );
;
//build page using name and pageData
;
对于基于 URL 的移动应用程序，当您说“转到此 URL”时，强制浏览器不从服务器重新加载页面的唯一方法是使用清单文件。
将此添加到您的 <html> 元素：
<html manifest="app.manifest">
确保您的网络服务器提供带有.manifest 扩展名和text/cache-manifest mime 类型的文件。
然后创建一个名为app.manifest的文件：
CACHE MANIFEST
#version 1.0
#files to cache here
CACHE:
home.html
#files to refresh every time
NETWORK:
login.html
一旦页面被缓存，它不会被更新，直到有一个新的清单文件。这只是意味着文件已以任何方式更改，包括 cmets（# 之后的任何内容）。版本行（这只是一个注释，对文件没有特殊意义）允许仅通过更改版本号进行更新。
还有使用window.applicationCache 对象与缓存清单一起使用的API。 HTML5 Rocks 上有一个很棒的教程：A Beginner's Guide to Using the Application Cache。
【讨论】：
感谢您冗长而清晰的解释。实际上，jQuery Mobile 仅在页面上不存在与请求的 url 具有相同 data-url 属性的页面元素时才使用 Ajax。但是，当我手动插入页面时，即使它识别并加载它，最终页面看起来也损坏了。通过使用 History API，该 url 也无需重新加载即可更改。这就是为什么我要问是否有支持的方式来做到这一点。几天来，我一直试图了解“大规模独立”框架的来源，但未能成功理解问题的原因。以上是关于从 iPhone 主屏幕重新打开时，如何在 jQuery Mobile 应用程序上缓存并保留上次访问的页面？的主要内容，如果未能解决你的问题，请参考以下文章
如何创建一个倒数计时器，当屏幕关闭时停止并“等待”，重新打开时恢复。安卓
iPhone SDK - 如何在应用程序关闭和重新打开时保存和恢复计时器标签