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

Clear browser cache after navigation form page

本文关键字：清除 浏览器 缓存 导航 表单      更新时间：2023-09-26

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

  1. 我发现最常见的解决方案是为ajax添加时间戳request(在jQuery中通过cache: false属性(。然而缺点是它禁用了http缓存(statuscode304(这是我不想做的。我也需要304雕像在其他场景中更新我的视图。

  2. 第二个选项是绑定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>

您可以在jquery中向ajax请求添加时间戳，如下

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

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

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

这是通过添加和&amp_=到请求结束的时间戳。而它强制将一个新的请求发送到服务器，这就是您所追求的。它还具有将请求添加到浏览器缓存的副作用。因此，如果您正在发出大量这样的请求，那么它可能会用大量的小ajax请求污染缓存。

相关文章：