browser-cache - 在 POST 请求中提交表单后，点击返回按钮时页面未更新

Question

我有一个简单的测试网站，有 2 个不同的页面，Page1 和 Page2。页面由 Web 服务器生成。

所有响应都包含以下标头：

Cache-control: no-cache, no-store, must-revalidate
Pragma: no-cache

Page1 包含一个到 Page2 的链接和一个 TextArea 元素，包含在一个 FORM 标记中。Page2 是一个空白页（它不包含任何有用的内容）。单击 Page2 链接（在 Page1 内）会将表单（和 TextArea 值）提交到服务器并切换到 Page2。每次从服务器请求 Page1 时，都会在 TextArea 中添加一个新行。这发生在服务器端（浏览器端没有通过 JavaScript 进行 DOM 操作）。

因此，当应用程序启动时，Page1 的 TextArea 包含：

“1号线”

如果我单击 Page2 的链接，然后单击返回按钮，Page1 的 TextArea 现在包含 2 行，如预期的那样：

“一号线”
“二号线”

这显示了两件事：

• BFCache（后退缓存）没有被使用（因为每次点击后退按钮时，都会向 Web 服务器发送一个新请求）。也可以通过pageshow的event参数persisted属性为false来确认。
• 浏览器正在正确更新页面（因为在服务器端添加到页面的新内容正在浏览器端显示，正如预期的那样）

但是，如果我清除文本区域，单击指向 Page2 的相同链接，然后单击返回按钮，TextArea 仍将显示空内容。我希望它只显示一行文本（由服务器插入）。这发生在所有经过测试的浏览器中，包括 WebKit、FireFox 甚至 Internet Explorer。

使用开发人员工具中的网络选项卡，我可以看到服务器以正确的内容响应，并且预览子选项卡（在开发工具/网络中）完全显示了这一点。

因此，在第二种情况下，浏览器肯定会从服务器检索更新的内容，但拒绝使用该内容更新页面。在我看来，无论何时提交页面，浏览器都会在用户点击后退按钮时使用提交的页面，而不管服务器端更新的内容如何。

此问题与此处的另一个问题非常相似：如何防止内容从 Firefox 中的 Back-Forward 缓存中显示？ 具有相同的症状，但在这种情况下，没有表单提交并且响应标头的更改将解决它。

我的问题：

a) 为什么浏览器从服务器检索更新的内容，但在特定场景中不使用它来更新页面？这是记录在案的行为吗？

b）有没有办法改变这种行为？我特别在考虑一种强制浏览器使用来自服务器的响应来更新页面的方法（与不涉及提交时发生的方式相同）。

顺便说一句，在 AJAX 请求中提交表单不是解决方案，而只是解决此问题的一种方法，请记住在某些情况下可能需要完整的回发。

标签： browser-cacheback-buttonbrowser-historycache-controlpage-refresh