导航表单页面后清除浏览器缓存答案

【问题标题】：Clear browser cache after navigation form page导航表单页面后清除浏览器缓存
【发布时间】：2013-05-01 12:54:55
【问题描述】：

我有一个多站点设置，每个站点通过 ajax 加载它的数据。一切都很完美，期待一个细节。如果我按下后退按钮，ajax 数据是从浏览器缓存加载的，而不是从服务器加载的。这是有问题的，因为用户可能会导航到第二个页面，更改状态并导航回他希望在概览中看到更改的上一页（例如，接受的任务图表现在有一个接受的任务，因为他接受了它)。

我发现的最常见的解决方案 是在 ajax 中添加时间戳请求（在 jQuery 中通过 cache: false 属性）。然而这缺点是它禁用了 http 缓存（状态码 304）我不想这样做。我也需要 304 状态码在其他情况下更新我的观点。
第二个选项是绑定 window.onbeforeunload 并显示用户离开页面时的警告消息。这会使浏览器缓存无效，因此即使后退按钮是，请求也会完成（不添加时间戳）按下。缺点是，用户会收到一个确认对话框每次他从页面导航（这很烦人）。为了安全原因我无法通过 JavaScript 确认，如果我不这样做显示信息，缓存没有失效。

是否有更多技巧可以使 broser 缓存失效/确保 ajax 请求真正到达服务器？

如果有人不想尝试我们的，这里是onbeforeunload 的示例代码。在您的网络跟踪工具（例如 Fiddler）中，您将设置当用户使用后退按钮导航到页面时请求被发送到服务器。如果你评论return 'Hello world'; 你不会。（请注意，在这两种情况下，您都会在浏览器调试器网络跟踪器中看到它，但这并不代表实际发送到服务器）。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>onbeforeunload</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>    
    <a href="http://google.com">Link away</a>
    <script>
        window.onbeforeunload = function () {
            return 'Hello world';
        } 


        $.ajax({
            type: "GET",
            url: "test", //doesn't matter if it is invalid
            success: function (data) {

            }
        });
    </script>
</body>
</html>

【问题讨论】：

标签： javascript browser-cache

【解决方案1】：

您可以像这样在 jquery 中为 ajax 请求添加时间戳

data: { 'time': new Date().getTime() }

【讨论】：

【解决方案2】：

你可以在ajax调用中添加cache:false来防止缓存

        $.ajax({
        type: "GET",
        url: "test", //doesn't matter if it is invalid
        cache: false,
        success: function (data) {

        }
    });

这可以通过在请求的末尾添加和 &_=timestamp 来实现。虽然它会强制将新请求发送到您所追求的服务器。它还具有将请求添加到浏览器缓存的副作用。因此，如果您发出大量此类请求，它可能会因大量小的 ajax 请求而污染缓存。

【讨论】：

np。我实际上几次期待这个答案。希望最终的解决方案也这么简单：D