正文 

当前位置： 首页 > 源码 >

从 iPhone 主屏幕重新打开时，如何在 jQuery Mobile 应用程序上缓存并保留上次访问的页面？

     2023-05-09     25

关键词：

【中文标题】从 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 也无需重新加载即可更改。这就是为什么我要问是否有支持的方式来做到这一点。几天来，我一直试图了解“大规模独立”框架的来源，但未能成功理解问题的原因。

如何创建一个倒数计时器，当屏幕关闭时停止并“等待”，重新打开时恢复。安卓

】如何创建一个倒数计时器，当屏幕关闭时停止并“等待”，重新打开时恢复。安卓【英文标题】：Howtocreateacountdowntimerthatstopsand"waits"whenthescreenisoff,resumeswhenbackon.Android【发布时间】：2016-01-2415:34:57【问题描述】：如何创... 查看详情

iPhone SDK - 如何在应用程序关闭和重新打开时保存和恢复计时器标签

】iPhoneSDK-如何在应用程序关闭和重新打开时保存和恢复计时器标签【英文标题】：iPhoneSDK-HowtosaveandresumetimerLabelwhenappisclosedandreopened【发布时间】：2014-07-2800:53:34【问题描述】：我有一个倒数计时器，当您启动它时，它会创建一... 查看详情

停止重新加载从 iPhone 主屏幕启动的 Web 应用程序

】停止重新加载从iPhone主屏幕启动的Web应用程序【英文标题】：StopreloadingofwebapplaunchedfromiPhoneHomeScreen【发布时间】：2011-10-1908:02:20【问题描述】：我创建了一个网络应用程序并添加到我的iPhone主屏幕。当我切换到另一个应用程... 查看详情

使用人脸 ID 从锁定屏幕打开时应用程序被阻止

】使用人脸ID从锁定屏幕打开时应用程序被阻止【英文标题】：Appisblockedwhenopeningfromlockscreenwithfaceid【发布时间】：2021-12-2707:02:41【问题描述】：我有一个应用程序在我的应用程序运行时禁止其他应用程序使用相机，但是当我将... 查看详情

阻止本机 Web 应用在 iOS 上打开时自行重新加载

...程序”。您可能知道，您可以将这样的应用程序添加到主屏幕，它或多或少看起来就像一个普通的原生应用程序。但是，如果我退出这样的应用程序并再次重新打开它，它会 查看详情

移动网络 - 如何在键盘打开时获取屏幕高度

】移动网络-如何在键盘打开时获取屏幕高度【英文标题】：Mobileweb-Howtogetthescreen\'sheightwhenthekeyboardisopen【发布时间】：2019-01-0418:14:05【问题描述】：我需要知道我的网络应用程序的实际可见高度以进行不同的计算。当软键盘打... 查看详情

如何使网站主屏幕友好？

】如何使网站主屏幕友好？【英文标题】：Howtomakeawebsitehomescreenfriendly?【发布时间】：2021-02-2812:28:14【问题描述】：如果您在iPhone的主屏幕上添加书签，您会发现它们有多么不同。有些，例如BBCFuture(https://bbc.com/future)，在打开时... 查看详情

WiFi打开时如何在iPhone中获取移动数据状态

】WiFi打开时如何在iPhone中获取移动数据状态【英文标题】：HowtogetMobiledatastatusiniPhonewhenWiFiisON【发布时间】：2016-03-0112:16:16【问题描述】：目前我正在开发一个需要显示移动数据状态（开/关）的iPhone应用程序。对于网络检查，... 查看详情

iPhone：当铃声/静音开关从关闭模式打开时不想退出游戏

】iPhone：当铃声/静音开关从关闭模式打开时不想退出游戏【英文标题】：iPhone:don\'twanttoexitgamewhilering/silentswitchturnsonfromturnsoffmode【发布时间】：2012-08-0904:41:33【问题描述】：我正在开发音频文件在其中扮演非常重要的角色的应... 查看详情

Vue 3 模式在重新打开时返回旧数据

】Vue3模式在重新打开时返回旧数据【英文标题】：Vue3ModalComesBackWithOldDataWhenReopen【发布时间】：2021-01-1820:29:43【问题描述】：我正在使用Vue3和Vuex4。当我打开模态框时，主对象（汽车）变得等于默认对象，并且这些默认值填充... 查看详情

如何在我的应用打开且屏幕打开时允许 Android 打瞌睡？

】如何在我的应用打开且屏幕打开时允许Android打瞌睡？【英文标题】：HowcanIallowAndroidtoDozewhilemyappisopenandthescreenison?【发布时间】：2019-03-3002:38:25【问题描述】：我正在通过Activity#setShowWhenLocked(true)制作一个将在设备锁定时运行... 查看详情

从应用商店打开时应用挂起

...n按钮从appStore打开应用程序时。应用已启动，但卡在启动屏幕上。启动屏幕不会消失，因此我无法使用该应用程序。iOS-10和iOS-11 查看详情

你如何让图像在 iPhone 主屏幕上摇摆不定？

】你如何让图像在iPhone主屏幕上摇摆不定？【英文标题】：HowdoyoumakeimageswobblelikeontheiPhonehomescreen?【发布时间】：2011-02-1219:29:19【问题描述】：我的应用程序中有许多图标，我希望以类似于您尝试从iPhone的主屏幕删除应用程序时... 查看详情

c#当屏幕/显示器电源关闭或打开时如何获取事件？

】c#当屏幕/显示器电源关闭或打开时如何获取事件？【英文标题】：c#Howtogettheeventswhenthescreen/displaygoestopowerOFForON?【发布时间】：2011-01-1314:17:22【问题描述】：您好，我一直在寻找，但找不到答案。我怎么知道屏幕何时关闭或打... 查看详情

键盘打开时如何固定小部件布局？

...06【问题描述】：我正在开发一个Flutter应用程序。在特定屏幕中，我有一个Cupertino样式的文本字段。（整个应用程序是Cupertino，我在屏幕下方有四个TabBar）。每当我点击文本字段时，虚拟键盘就会打开，所有小部件都会挤在文本... 查看详情

在 iPhone 上重新打开 Safari 时如何检测焦点？

】在iPhone上重新打开Safari时如何检测焦点？【英文标题】：HowtodetectfocuswhenreopeningSafarioniPhone?【发布时间】：2012-07-2210:23:01【问题描述】：我有一个适用于iPhone的网络应用程序，我需要在网页处于焦点时触发Javascript函数，换句话... 查看详情

bootstrap-select 从关闭状态重新打开时的空选项

】bootstrap-select从关闭状态重新打开时的空选项【英文标题】：emptyoptionswhenbootstrap-selectisreopenfrombeingclosed【发布时间】：2016-11-1405:56:06【问题描述】：我想使用bootstrap-selectjQueryplugin为我的UI中的标准选择元素带来风格和附加功能... 查看详情

HKObserverQuery 仅在应用程序重新打开时运行

】HKObserverQuery仅在应用程序重新打开时运行【英文标题】：HKObserverQueryonlyrunswhentheapplicationisreopened【发布时间】：2017-07-2320:17:42【问题描述】：所以我一直按照这个答案中的说明进行操作......Healthkitbackgrounddeliverywhenappisnotrunning... 查看详情