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

2023 update:参见Clear-Site-Data HTTP报头，通过该报头，服务器可以指示客户端浏览器清除其域/子域的网站缓存，而不考虑早期的Cache-Control报头。中间缓存可能仍然缓存数据，但可能不尊重标头。(谢谢,@nishanthshanmugham)

没有办法浏览器会让你清除缓存。如果可能的话，这将是一个巨大的安全问题。这很容易被滥用——一旦浏览器支持这样的"特性"。当我把它从我的电脑上卸载的时候。

你可以做的是告诉它不要缓存你的页面，通过发送适当的标题或使用这些meta标签:

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

您可能还想考虑关闭表单字段的自动完成功能，尽管恐怕有一种标准的方法可以做到这一点(参见这个问题)。

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

使用SSL还会使一些浏览器不使用缓存，除非明确告知。看看这个问题。

这是可能的，您可以简单地使用jQuery替换引用缓存状态的'meta标签'与事件处理程序/按钮，然后刷新，很容易，

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){
            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

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

使用HTML本身。有一个技巧可以使用。诀窍是在脚本标签的文件名后面附加一个参数/字符串，并在文件更改时更改它。

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

浏览器将整个字符串解释为文件路径，即使"?"后面的是参数。所以现在发生的事情是，下次当你更新你的文件只是改变你的网站(示例<script src="myfile.js?version=1.0.1"></script>)上的脚本标签的数字，每个用户的浏览器将看到文件已经改变，并抓取一个新的副本。

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

这是一个单行的如何删除所有浏览器的网络缓存使用cache .delete()

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

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

在Chrome上，您应该能够使用基准测试扩展来做到这一点。你需要启动你的chrome与以下开关:

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

在Chrome的控制台中，现在你可以做以下操作:

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

从上面的命令可以看出，它不仅清除浏览器缓存，还清除DNS缓存并关闭网络连接。当您进行页面加载时间基准测试时，这些非常有用。显然，如果不需要，您不必使用它们(例如，如果您只需要清除缓存并且不关心DNS缓存和连接，clearache()应该足够了)。

最初我在我的html, JS中尝试了各种编程方法来清除浏览器缓存。

最后，我用。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/

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

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

指示用户代理清除所有本地存储的数据，包括:

网络缓存
• 用户代理缓存(如预渲染页面、脚本缓存等)
<
• 饼干/gh>
• HTTP认证凭证
• 来源绑定令牌(如通道ID和令牌绑定)
• 本地存储
会话存储
• IndexedDB
Web SQL数据库
• Service Worker注册

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

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

现在可以使用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。

//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 >

通过定义缓存无效元标记的函数:

function addMetaTag(name,content){
var meta = document.createElement('meta');
meta.httpEquiv = name;
meta.content = content;
document.getElementsByTagName('head')[0].appendChild(meta);
}

您可以调用:

addMetaTag("pragma","no-cache")
addMetaTag("expires","0")
addMetaTag("cache-control","no-cache")

这将为后续请求插入元标记，这将迫使浏览器获取新的内容。插入后，您可以调用location.reload()，这将在大多数所有浏览器中工作(Cache.delete()不在chrome中工作)

我清除浏览器的缓存出于开发原因。当数据模式改变时，清除本地存储、会话存储、IndexDB、cookies等。如果未清除，则在与数据库同步数据时可能会出现数据损坏。也可以像OP建议的那样，出于安全原因清除缓存。

这是我使用的代码:

caches.keys().then(list => list.map(key => caches.delete(key)))

https://developer.mozilla.org/en-US/docs/Web/API/Cache

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

通常情况下，script标签是这样的:

<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，只是认为文件是新的，他必须去获取它。

您可以将此用于CSS, favicons和任何被缓存的内容。对于CSS，只需使用so

<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>