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

小开

有一个 不可能浏览器会让你清除它的缓存。如果可能的话，这将是一个巨大的安全问题。这很容易被滥用——一旦浏览器支持这种“功能”，我就会立刻从电脑上卸载它。

可以所做的就是告诉它不要缓存你的页面，通过发送适当的标题或使用这些 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);
}
});
});

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

小开

在 Chrome 上，你应该可以使用基准测试扩展来实现这一点。您需要用以下开关启动您的铬:

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

在 Chrome 的控制台上，你可以做到以下几点:

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

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

小开

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

小开

使用 html 本身。有一个窍门可以用。诀窍是在 script 标记中将参数/字符串附加到文件名，并在文件更改时更改它。

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

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

小开

假设 .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-file 最后一次被修改时通过时间戳设置这个数字。因此，如果数字不变，缓存将正常工作。如果它改变它将服务于新的文件(YES 总是) ，因为浏览器得到的是一个完全新的 URL，只是认为文件是如此新，他必须去获取它。

你可以使用这个对于 CSS，favicons和任何被缓存的东西。对于 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>

小开

Reload (true) ; 将重新加载当前页面，忽略缓存。
Delete () 也可以用于新的 chrome、 Firefox 和 Opera。

小开

最初，我尝试了各种编程方法在我的 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/

小开

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

小开

下面是如何使用 Delete ()删除所有浏览器网络缓存的单行程序

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

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

小开

您可以让服务器使用清除网站资料指令进行响应，该指令指示用户代理清除站点的本地存储数据。

例如:

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

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

网络缓存
用户代理缓存(如预呈现页面、脚本缓存等)
饼干
HTTP 身份验证凭据
原点绑定令牌(例如通道 ID 和令牌绑定)
本地仓库
会话存储
IndexedDB
Web SQL 数据库
服务工作者注册

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

小开

通过为缓存无效元标记定义一个函数:

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

这将为后续请求插入 meta 标记，这将强制浏览器获取新的内容。插入后，你可以调用 location.reload()，这将工作在几乎所有的浏览器(Cache.delete()是不工作的 Chrome 为例。)

小开

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

这是我使用的代码:

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

就这么简单，就像冠军一样。更多信息:

Https://developer.mozilla.org/en-us/docs/web/api/cache