使用本地存储的页面版本而不是另一个请求

Question

我正在从事一个 web 项目，其中性能是一个非常重要的问题。

编辑：

情况：

我想添加一些关于用户工作流程的细节：

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

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

编辑：

我的问题：

客户端已经在上面列表的#2 到#7 中创建/生成http://example.org/mypage 。 我不需要在其他时间创建该页面。 这就是为什么我不希望浏览器创建对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

试图解决：

1. 我不能使用清单文件的回退部分来做类似的事情：编辑：（除了 orgin）

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

为了让浏览器使用存储在文件系统中的本地版本，因为仅在用户离线时使用 Fallback 指令，否则它们将被忽略。 编辑：但我想使用filesystem:http://example.org/mypage而不是http://example.org/mypage ，即使用户在线。

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

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

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

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

Answer 1

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

顺便说一句，这行不通，因为后备条目必须在同一个域中：

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

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

Answer 2

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