使用本地存储的页面版本而不是其他请求

时间：2012-04-05 14:09:05

标签： html5 caching xmlhttprequest local-storage html5-appcache

我正在开展一个表现非常重要的网络项目。

修改 的

情况：

我想添加一些有关用户工作流程的详细信息：

  1. 用户访问我的网站http://example.org/的欢迎页面。
  2. 点击链接以访问页面http://example.org/mypage
  3. onclick - 已执行链接的处理程序。
  4. 处理程序使用'XHR。
    5. 加载数据
  5. 处理程序动态创建http://example.org/mypage。
  6. 处理程序使用FileSystem API filesystem:http://example.org/mypage在filesystem:http://example.org/mypage本地保存mypage。 编辑： （FileSystem是存储在客户端History API的本地资源）
  7. 处理程序扩展了历史记录，并将http://example.org/中的位置栏的网址从http://example.org/mypage（欢迎页面的网址）更改为http://example.org/mypage（用户想要的页面）见）。
  8. 用户在此期间访问另一页。
  9. 稍后，用户会直接在位置栏中输入filesystem:http://example.org/mypage。
  10. 浏览器显示/加载http://example.org/mypage（http://example.org/mypage的本地存储版本）而不是http://example.org/mypage。这意味着：浏览器不会创建新请求，而是使用http://example.org/mypage。
    11. 的本地存储副本

    如何让浏览器使用本地存储的页面版本而不是创建新请求？ 编辑： - 这就是我想要在上面列表中排名第10的内容。

    修改 的

    我的问题：

    客户端已在上面列表的＃2到＃7中创建/生成http://example.org/mypage。我不需要在其他时间创建该页面。这就是为什么我不希望浏览器创建filesystem:http://example.org/mypage的请求。

    这就是我想做的事情：

      

    如果已创建http://example.org/mypage（如果用户已访问过filesystem:http://example.org/mypage，则分别如此）：

         
        

    使用http://example.org/mypage代替http://example.org/mypage。

      
         

    否则：

         
        

    发送filesystem:http://example.org/mypage

    的请求   

    试图解决：

    1. 我不能使用清单文件的后备部分来执行以下操作： 编辑： （除了orgin）

      FALLBACK： http://example.org/mypage文件系统：http：//example.org/mypage

      2. 为了让浏览器使用存储在FileSystem中的本地版本，因为如果用户处于脱机状态，则仅使用Fallback指令，否则将忽略它们。 编辑： 但我想使用http://example.org/mypage代替The situation，即使用户在线也是如此。

      1. 我知道我可以在服务器生成的页面的响应头中使用Expire字段，以便不创建新请求并使用缓存版本。

        2. 但是如果我使用JS和XHR在客户端动态创建页面会怎样。 编辑： （我在FileSystem API中描述了这种情况）在客户端创建页面时，无法让客户端缓存该页面。这就是为什么我在'{{1}}中手动“缓存”页面以将其存储在客户端。

        为了提高性能，我试图存储用户已在本地访问过的任何页面。当用户再次访问页面时，我会向他显示旧的本地存储版本的页面，我的脚本会创建一个XHR，以确定页面是否在此期间发生了变化。

        但是如何让浏览器使用本地版本的页面？ 我可以使用FileSystem API在客户端本地保存生成的页面，我可以选择生成页面的URL，使用History API在浏览器的位置栏上显示它。
        当用户现在访问另一个站点然后按下后退按钮时，我可以通过事件处理程序捕获onPopState事件 并且该事件处理程序可以使用FileSystem API加载动态创建的文件 但是，如果用户不使用后退按钮，并且他使用历史记录API将URL注册的URL直接输入到位置栏，我该怎么办？ 然后浏览器不会使用本地存储的页面版本，浏览器会创建一个从服务器加载页面的请求。

2 个答案:

答案 0 :(得分：0)

不要将动态数据放在应用程序缓存中。如果您想在页面中放置动态数据，然后使用AJAX从服务器获取它，将数据存储在Local Storage中，并通过JavaScript使用存储中的数据填充页面（您可以为此填充历史记录API） ）。

顺便说一下，这不起作用，因为后备条目必须位于同一个域中：

FALLBACK:
http://example.org/mypage filesystem:http://example.org/mypage

一旦您的页面位于应用程序缓存中（即它在本地存储），浏览器将始终使用应用程序缓存中的版本，直到更新清单或用户删除缓存。您放在页面上的过期标头并不重要，除非您放置一个很长的过期而且经常更新清单，那么可能会从浏览器缓存中填充应用程序缓存而不是从服务器刷新。这就是你放入应用程序缓存的东西应该是静态文件的原因。使用AJAX获取动态内容。

答案 1 :(得分：0)

您可以使用对您的层次结构中的实际链接进行编码的网址，例如“mypage”，在网址的锚点部分，即http://example.com/#mypage。然后你可以使用window.location.hash来获取＃之后的字符串并做你想要的任何魔法。只需确保您的root（或＃前面的任何内容）在AppCache中。

相关问题
最新问题