Ajax，后退按钮和DOM更新

如果javascript修改了页面A中的DOM，则用户导航到页面B，然后单击返回按钮以返回到页面A。对页面A的DOM的所有修改都将丢失，并且向用户显示最初从服务器检索到的版本。

它可以在stackoverflow，reddit和许多其他流行的网站上以这种方式工作。（尝试向该问题添加测试评论，然后导航至其他页面并单击“返回”按钮以返回-您的评论将“消失”）

这很有道理，但是某些网站（apple.com，basecamphq.com等）以某种方式迫使浏览器向用户提供页面的最新状态。（转到http://www.apple.com/ca/search/?q=ipod，单击顶部的“说下载”链接，然后单击“后退”按钮-所有DOM更新将被保留）

不一致来自何处？

一个答案：除其他事项外，卸载事件会使后退/前进缓存无效。

一些浏览器将整个网页的当前状态存储在所谓的“ bfcache”或“页面缓存”中。这样，他们可以在通过后退和前进按钮导航时非常快速地重新呈现页面，并保留DOM和所有JavaScript变量的状态。但是，当页面包含onunload事件时，这些事件可能会将页面置于非功能状态，因此该页面未存储在bfcache中，必须重新加载（但可以从标准缓存中加载）并重新从头开始渲染，包括运行所有onload处理程序。通过bfcache返回页面时，DOM保持其先前状态，而无需触发onload处理程序（因为该页面已被加载）。

请注意，关于Cache-Control和其他HTTP标头，bfcache的行为与标准浏览器缓存不同。在许多情况下，浏览器会将页面缓存在bfcache中，即使它不将其存储在标准缓存中也是如此。

jQuery会自动将卸载事件附加到窗口，因此不幸的是，使用jQuery会使您的页面无法保存在bfcache中以进行DOM保留和快速前进/后退。[更新：此问题已在jQuery 1.4中修复，因此仅适用于IE]

• 有关Firefox bfcache的信息
• 有关Safari页面缓存的信息以及未来卸载事件的工作方式可能发生的变化
• Opera使用快速历史记录导航
• Chrome没有页面缓存（[1]，[2]）
• 用于处理DOM操作和bfcache的页面：
  • 该页面将存储在常规缓存中
  • 此页面不会，但仍会bfcached

我一直在尝试使Chrome的行为像Safari一样，而我发现可行的唯一方法是Cache-control: no-store在标头中进行设置。当用户按下“后退”按钮时，这将迫使浏览器从服务器重新获取页面。这并不理想，但是比显示过时的页面更好。

Facebook通过修改ajax请求的URL中的哈希标识符来记住页面状态。这些更改会记录在浏览器的历史记录中，因此，当用户单击“后退”按钮时，哈希将更改为以前的样子。因此，这意味着您将需要一些Java脚本来监视has标识符并在浏览器更改它时做出反应。 Andreas Blixt有一个可用的哈希监视脚本。

这与哈希（＃）符号无关。

如果您要检查apple的HTTP标头，它只是在缓存页面。

在依赖Ajax和DOM更新的Web应用程序中，使用URL哈希/片段标识符是挂钩/记住状态的一种很常见的方法。

查看“ 真正简单的历史”项目，了解一些想法。可以监视URL的哈希值更改，而rsh会考虑浏览器的差异来做到这一点。

对于任何遇到Rails此问题的人-您的问题不是bfcache（我认为是）-就是turbolinks宝石。这是如何删除它。

希望这可以节省您一些时间，让您的头撞在墙上。

您正在寻找某种类型的URL哈希管理。网址中的＃仅用于客户端。

当您使用JS更改背面的状态时，您将更新网址＃中的数据。

此外，您还会添加某种类型的轮询，以监视哈希是否已更改，并根据哈希中的新数据加载页面的状态。

看看这个：

http://ajaxpatterns.org/Unique_URLs