这个 ajax 调用如何在浏览器缓存中持久化 DOM 更改？

Question

出于问题的目的，我需要创建一个简单的虚构场景。

我有以下带有一个链接的简单页面，称之为页面 A：

<a class="red-anchor" onclick="change_color(event);" href="http://mysite.com/b/">B</a>

使用相关的 Javascript 函数：

function change_color(e)
{
  var event = e || window.event;
  var link = event.target;
  link.className = "green-anchor";
}

我有适当的 CSS 来根据类名将锚点设为红色或绿色。

这是有效的。也就是说，当我单击锚点时，它会将颜色从红色变为绿色，这在浏览器加载页面 B 之前短暂可见。

但如果我随后使用 BACK 按钮返回到页面 A，我会在不同的浏览器中得到不同的行为。

• 在 Safari 中，锚点仍为绿色（所需行为）
• 在 Firefox 中它恢复为红色

我想 Safari 正在以某种方式更新其页面的缓存版本，而 Firefox 则没有。

所以我的第一个问题是：有什么方法可以让 FF 更新缓存的页面，还是这里发生了其他事情？

其次：我有一个不同的实现，我使用 ajax 调用。在此我使用会话变量设置锚的类，例如...

<a class="<?php echo $_SESSION["color"]; ?>"  ...[snip]... >B</a>

并且 javascript 函数会进行额外的 ajax 调用，从而更改“颜色”会话变量。

在这种情况下，Safari 和 Firefox 都可以正常工作。从 B 回到 A 时，颜色仍然是绿色。但我一生都无法弄清楚为什么它应该与非 ajax 案例不同。我已经尝试了许多不同的排列，为了让它在 FF 上工作，“颜色”会话变量必须改变（即 ajax 调用本身并没有以某种方式重新加载缓存）。但是在返回时，页面正在从缓存中重新加载（在 Firebug 中验证），那么如果页面没有重新处理页面并在锚点中运行该 php 片段，那么页面如何访问这个会话变量？

我认为这里一定有一些我不理解的基本内容。任何见解将不胜感激。

Answer 1

回答我自己的问题，这是一个缓存问题。 Safari 没有缓存页面，这让我觉得我对 DOM 的 Javascript 更改通过导航离开并使用 BACK 按钮返回而持续存在。

总结一下：

1. 页面加载后对 DOM 的 Javascript 更改不会在任一浏览器上继续存在，因为缓存的版本是页面最初加载的版本
2. FF 和 Safari 的行为不同，因为 FF 需要在 Cache-Control 标头指令中使用“no-store” - “no-cache”不足以禁用页面缓存

更多关于#2的信息可以在这里找到：http://blog.httpwatch.com/2008/10/15/two-important-differences-between-firefox-and-ie-caching/

Answer 2

在 Firefox 中它恢复为红色

它不会恢复为红色，而是保持红色。当您“返回”到它时，它不是一个新页面，它是完全相同的页面对象：它只是在您离开它时隐藏，而不是立即丢弃；当您返回时，旧 DOM 连同您对其所做的所有更改一起被拉回屏幕，并且其中运行的所有脚本内容继续运行。

此功能称为bfcache，Firefox 和 Safari（以及 Opera）都有它。我不知道为什么它没有在 Safari 中为您启动......也许浏览器中有一些不同的缓存设置，您通过导航或等待更长的时间从缓存中清除了页面。

有没有办法让FF更新缓存页面

您可以通过在onunload 上设置任何事件处理程序（甚至是无操作function() {}）来破坏bfcache，但这并不理想。您会使页面导航变得不必要地变慢。换色的目的是什么，应该是什么意思，回去的时候需要重新设置一下？

如果您单击链接然后按 Escape 取消导航会发生什么？如何在setTimeout 调用时重新设置颜色，是否导航？