如何以编程方式清空浏览器缓存?

时间:2011-11-16 16:25:48

标签: javascript html5 caching browser

我正在寻找一种以编程方式清空浏览器缓存的方法。我这样做是因为应用程序缓存了机密数据,我想在你“注销”时删除它们。这可以通过服务器或JavaScript发生。当然,仍然不鼓励在外国/公共计算机上使用该软件,因为在软件级别上你无法击败关键记录器等更多危险。

12 个答案:

答案 0 :(得分:137)

没办法浏览器会让您清除其缓存。如果可能的话,这将是一个巨大的安全问题。这可能很容易被滥用 - 浏览器支持这样一个“功能”的那一刻,我将从计算机上卸载它。

可以做的是告诉它不要通过发送相应的标头或使用这些元标记来缓存您的页面:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

您可能还想考虑在表单字段上关闭自动完成功能,但我担心有一种标准的方法(see this question)。

无论如何,我想指出,如果您正在处理敏感数据,那么您应该使用SSL。如果您不使用SSL,任何有权访问网络的人都可以嗅探网络流量并轻松查看您的用户所看到的内容。

使用SSL还会使某些浏览器使用缓存,除非明确告知。请参阅this question

答案 1 :(得分:35)

有可能,您可以简单地使用jQuery替换使用事件处理程序/按钮引用缓存状态的“元标记”,然后刷新,轻松,

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

注意:此解决方案依赖于作为HTML 5规范的一部分实现的应用程序缓存。它还需要服务器配置来设置App Cache清单。它没有描述通过客户端或服务器端代码清除“传统”浏览器缓存的方法,这几乎是不可能的。

答案 2 :(得分:12)

使用html本身。有一个技巧可以使用。技巧是将参数/字符串附加到脚本标记中的文件名,并在提交更改时更改它。

<script src="myfile.js?version=1.0.0"></script>

浏览器将整个字符串解释为文件路径,即使在&#34;?&#34;之后出现了什么。是参数。因此,现在发生的情况是,下次更新文件时,只需更改网站脚本标记中的数字(示例<script src="myfile.js?version=1.0.1"></script>),每个用户浏览器都会看到文件已更改并获取新副本。

答案 3 :(得分:7)

最好的想法是使js文件生成名称+一些哈希版本,如果你确实需要清除缓存,只需用新哈希生成新文件,这将触发浏览器加载新文件

答案 4 :(得分:3)

在Chrome上,您应该可以使用基准测试扩展程序执行此操作。您需要使用以下开关启动chrome:

./chrome --enable-benchmarking --enable-net-benchmarking 

现在,您可以在Chrome的控制台中执行以下操作:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

从上面的命令可以看出,它不仅可以清除浏览器缓存,还可以清除DNS缓存并关闭网络连接。当您进行页面加载时间基准测试时,这些都很棒。显然,如果不需要,你不必全部使用它们(例如,如果你只需要清除缓存并且不关心DNS缓存和连接,那么clearCache()就足够了。

答案 5 :(得分:3)

location.reload(真);将硬重新加载当前页面,忽略缓存。
Cache.delete()也可以用于新的chrome,firefox和opera。

答案 6 :(得分:3)

最初我在我的html,JS中尝试了各种编程方法来清除浏览器缓存。在最新的Chrome上没有任何作用。

最后,我最终得到了.htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

在Chrome,Firefox,Opera中进行测试

参考:https://wp-mix.com/disable-caching-htaccess/

答案 7 :(得分:1)

您现在可以使用Cache.delete()

示例:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

适用于Chrome 40 +,Firefox 39 +,Opera 27+和Edge。

答案 8 :(得分:1)

//The code below should be put in the "js" folder with the name "clear-browser-cache.js"

(function () {
    var process_scripts = false;
    var rep = /.*\?.*/,
    links = document.getElementsByTagName('link'),
    scripts = document.getElementsByTagName('script');
    var value = document.getElementsByName('clear-browser-cache');
    for (var i = 0; i < value.length; i++) {
        var val = value[i],
            outerHTML = val.outerHTML;
        var check = /.*value="true".*/;
        if (check.test(outerHTML)) {
            process_scripts = true;
        }
    }
    for (var i = 0; i < links.length; i++) {
        var link = links[i],
        href = link.href;
        if (rep.test(href)) {
            link.href = href + '&' + Date.now();
        }
        else {
            link.href = href + '?' + Date.now();
        }
    }
    if (process_scripts) {
        for (var i = 0; i < scripts.length; i++) {
            var script = scripts[i],
            src = script.src;
            if (src !== "") {
                if (rep.test(src)) {
                    script.src = src + '&' + Date.now();
                }
                else {
                    script.src = src + '?' + Date.now();
                }
            }
        }
    }
})();
At the end of the tah head, place the line at the code below

    < script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >

答案 9 :(得分:0)

想象一下,.js文件放在/my-site/some/path/ui/js/myfile.js

通常,脚本标记看起来像:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

现在改为:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

现在当然不行。要使其正常工作,您需要在.htaccess中添加一行或几行 重要的是:(整个.htaccess在底部)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

所以它的作用是,它从路径中删除1111111111并链接到正确的路径。

现在,如果您进行更改,只需将数字1111111111更改为您想要的任何数字。然而,当您包含文件时,可以在最后修改js文件时通过时间戳设置该数字。因此,如果数字没有改变,缓存将正常工作。如果它改变了它将提供新文件(是的总是),因为浏览器得到一个完整的新URL并且只是认为该文件是新的,他必须得到它。

您可以将其用于CSSfavicons以及缓存的内容。对于CSS,只需使用如此

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

它会起作用!易于更新,易于维护。

  

承诺的全部.htaccess

如果你没有.htaccess,那么这是你需要的最低限度:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>

答案 10 :(得分:0)

这是有关如何使用Cache.delete()删除所有浏览器网络缓存的单行内容

caches.keys().then((keyList) => Promise.all(keyList.map((key) => caches.delete(key))))

可在Chrome 40 +,Firefox 39 +,Opera 27+和Edge上使用。

答案 11 :(得分:0)

您可以让服务器使用 Clear Site Data 指令进行响应,指示用户代理清除站点的本地存储数据。

例如:

Clear-Site-Data: "cache", "cookies", "storage"

该标头将指示用户代理清除所有本地存储的数据,包括:

  • 网络缓存
  • 用户代理缓存(如预渲染页面、脚本缓存等)
  • 饼干
  • HTTP 身份验证凭据
  • 源绑定令牌(例如通道 ID 和令牌绑定)
  • 本地存储
  • 会话存储
  • 索引数据库
  • Web SQL 数据库
  • Service Worker 注册

您可以使用 fetch() 发送请求,然后执行 location.reload() 以重新启动。