有没有办法可以在我的页面上放置一些代码，这样当有人访问网站时，它会清除浏览器缓存，以便他们可以查看更改？
使用的语言：ASP.NET、VB.NET，当然还有 HTML、CSS 和 jQuery。
【问题讨论】：
标签： html caching browser meta-tags
如果这是关于 .css 和 .js 的更改，一种方法是“缓存破坏”是在每个版本的文件名中附加类似“_versionNo”的内容。例如：
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.
或者在文件名之后做：
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.
您可以查看此link 以了解它是如何工作的。
【讨论】：
script.js?v=1.2。 （或者，如果您不跟踪版本，只需使用文件上次修改时间，这更容易做到）。不知道前面的评论是不是这个意思！
查看cache-control 和expires META 标签。
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"><META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
另一种常见做法是将不断变化的字符串附加到请求文件的末尾。例如：
<script type="text/javascript" src="main.js?v=12392823"></script>
【讨论】：
这是一个老问题，但我认为它需要一个更新的答案，因为现在有一种方法可以更好地控制网站缓存。
在Offline Web Applications（实际上是任何 HTML5 网站）中，applicationCache.swapCache() 可用于更新您网站的缓存版本，而无需手动重新加载页面。
这是来自 HTML5 Rocks 上 Beginner's Guide to Using the Application Cache 的代码示例，解释了如何将用户更新到您网站的最新版本：
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
有关更多信息，另请参阅 Mozilla 开发者网络上的 Using the application cache。
网络上的事情变化很快。 这个问题是在 2009 年提出的，在 2012 年我发布了一个关于处理问题中描述的问题的新方法的更新。又过了 4 年，现在看来它已经被弃用了。感谢 cgaldiolo 在 cmets 中指出这一点。
目前，截至 2016 年 7 月，HTML Standard, Section 7.9, Offline Web applications 包含弃用警告：
此功能正在从 Web 平台中删除。 （这是一个需要很多年的漫长过程。）使用任何 此时非常不鼓励使用离线 Web 应用程序功能。 请改用服务人员。
我在 2012 年引用的 Mozilla 开发者网络上的 Using the application cache 也是如此：
已弃用
此功能已从 Web 标准中删除。 虽然有些浏览器可能仍然支持它，但它正在处理中 被丢弃。不要在旧项目或新项目中使用它。页面或 Web 应用程序 使用它可能随时中断。
另见Bug 1204581 - Add a deprecation notice for AppCache if service worker fetch interception is enabled。
【讨论】：
并非如此。一种方法是在交付内容时发送适当的标头以强制浏览器重新加载：
Making sure a web page is not cached, across all browsers.
如果您在 SO 上搜索 "cache header" 或类似内容，您会找到 ASP.NET 特定示例。
另一种不太干净但有时只有在您无法控制服务器端的标头时才有的方法是向正在调用的资源添加随机 GET 参数：
myimage.gif?random=1923849839
【讨论】：
对于静态资源，正确的缓存是使用查询参数和每个部署或文件版本的值。这将在每次部署后清除缓存。
/Content/css/Site.css?version={FileVersionNumber}
这是 ASP.NET MVC 示例。
<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />
不要忘记更新程序集版本。
【讨论】：
?version=@ViewContext.Controller.GetType().Assembly.GetName().Version
我遇到了类似的问题，我就是这样解决的：
在index.html 文件中我添加了清单：
<html manifest="cache.manifest">
<head> 部分包含更新缓存的脚本：
<script type="text/javascript" src="update_cache.js"></script>
在<body> 部分我插入了 onload 函数：
<body onload="checkForUpdate()">
在cache.manifest 中，我已将所有要缓存的文件放入其中。现在很重要的是，它在我的案例（Apache）中只需每次更新“版本”注释即可。也可以选择在名称末尾使用“?ver=001”或其他名称命名文件，但它不需要。仅更改 # version 1.01 会触发缓存更新事件。
CACHE MANIFEST
# version 1.01
style.css
imgs/logo.png
#all other files
在 index.html 中仅包含 1.、2. 和 3. 点很重要。否则
GET http://foo.bar/resource.ext net::ERR_FAILED
发生是因为每个“子”文件都试图在页面已经缓存时缓存页面。
在update_cache.js 文件中，我输入了以下代码：
function checkForUpdate()
{
if (window.applicationCache != undefined && window.applicationCache != null)
{
window.applicationCache.addEventListener('updateready', updateApplication);
}
}
function updateApplication(event)
{
if (window.applicationCache.status != 4) return;
window.applicationCache.removeEventListener('updateready', updateApplication);
window.applicationCache.swapCache();
window.location.reload();
}
现在您只需更改文件并在清单中更新版本注释。现在访问 index.html 页面会更新缓存。
解决方案的部分不是我的，但我通过互联网找到了它们并将它们放在一起以便它工作。
【讨论】：
我有一个案例，我会在网上为客户拍照，如果照片发生变化，我需要更新 div。浏览器仍在显示旧照片。所以我使用了调用随机 GET 变量的技巧，每次都是唯一的。如果它可以帮助任何人，那就在这里
<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...
编辑 正如其他人指出的那样，以下是更有效的解决方案，因为它只会在图像发生更改时重新加载图像，并通过文件大小识别这种更改：
<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"
【讨论】：
很多答案都没有抓住重点——大多数开发人员都清楚关闭缓存是低效的。但是，在许多常见情况下效率并不重要，默认缓存行为被严重破坏。
这些包括嵌套的迭代脚本测试（最重要的！）和损坏的第三方软件变通办法。此处给出的解决方案均不足以解决此类常见情况。大多数网络浏览器的缓存过于激进，并且没有提供任何明智的方法来避免这些问题。
【讨论】：
将 URL 更新为以下内容对我有用：
/custom.js?id=1
通过在?id= 之后添加一个唯一的数字并将其递增以进行新的更改，用户不必按CTRL + F5 来刷新缓存。或者，您可以在 ?id= 之后附加当前时间或 Epoch 的哈希或字符串版本
类似?id=1520606295
【讨论】：
<meta http-equiv="pragma" content="no-cache" />
另见https://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images
【讨论】：
Here 是关于在 ASP.NET 中设置缓存的 MDSN 页面。
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
Response.Cache.SetCacheability(HttpCacheability.Public)
Response.Cache.SetValidUntilExpires(False)
Response.Cache.VaryByParams("Category") = True
If Response.Cache.VaryByParams("Category") Then
'...
End If
【讨论】：
不确定这是否真的对您有所帮助，但这就是缓存在任何浏览器上的工作方式。当浏览器请求一个文件时，它应该总是向服务器发送一个请求，除非有“离线”模式。服务器将读取一些参数，如修改日期或 etags。
服务器将返回未修改的 304 错误响应，并且浏览器将不得不使用其缓存。如果 etag 在服务器端无效或修改日期低于当前修改日期，则服务器应返回带有新修改日期或 etag 或两者的新内容。
如果没有缓存数据发送到浏览器，我猜行为是不确定的，浏览器可能缓存也可能不缓存不告诉它们如何缓存的文件。如果您在响应中设置缓存参数，它将正确缓存您的文件，然后服务器可能会选择返回 304 错误或新内容。
这是应该的。在 url 中使用随机参数或版本号更像是一种 hack。
http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs-expire-header-vs-etag/
看完后我看到还有一个过期日期。如果您有问题，可能是您设置了过期日期。换句话说，当浏览器缓存您的文件时，由于它有一个到期日期，它不应该在该日期之前再次请求它。换句话说，它永远不会向服务器询问文件，也永远不会收到未修改的 304。它只会使用缓存，直到到期日期或缓存被清除。
所以这是我的猜测，您有某种到期日期，您应该使用最后修改的 etag 或混合使用，并确保没有到期日期。
如果人们经常刷新文件并且文件没有发生太多更改，那么设置一个大的到期日期可能是明智的。
我的 2 美分！
【讨论】：
我实现了这个适用于我的简单解决方案（尚未用于生产环境）：
function verificarNovaVersio() {
var sVersio = localStorage['gcf_versio'+ location.pathname] || 'v00.0.0000';
$.ajax({
url: "./versio.txt"
, dataType: 'text'
, cache: false
, contentType: false
, processData: false
, type: 'post'
}).done(function(sVersioFitxer) {
console.log('Versió App: '+ sVersioFitxer +', Versió Caché: '+ sVersio);
if (sVersio < (sVersioFitxer || 'v00.0.0000')) {
localStorage['gcf_versio'+ location.pathname] = sVersioFitxer;
location.reload(true);
}
});
}
我有一个小文件位于 html 所在的位置：
“版本.txt”：
v00.5.0014
这个函数在我所有的页面中都会被调用，所以在加载的时候会检查localStorage的版本值是否低于当前版本并做一个
location.reload(true);
...强制从服务器而不是从缓存重新加载。
（显然，您可以使用 cookie 或其他持久客户端存储来代替 localStorage）
我选择了这种简单的解决方案，因为只维护一个文件“versio.txt”会强制重新加载整个网站。
queryString方法很难实现，也是缓存的（如果从v1.1改到之前的版本会从缓存中加载，那么就意味着缓存没有被刷新，所有之前的版本都在缓存中）。
我是一个小新手，非常感谢您的专业检查和审查，以确保我的方法是一个好的方法。
希望对你有帮助。
【讨论】：
除了设置 Cache-control: no-cache 之外，如果你希望每次都刷新本地副本，你还应该将 Expires 头设置为 -1（某些版本的 IE 似乎需要这样做）。
见HTTP Cache - check with the server, always sending If-Modified-Since
【讨论】：
有一个技巧可以使用。技巧是在脚本标记中的文件名中附加一个参数/字符串，并在文件更改时更改它。
<script src="myfile.js?version=1.0.0"></script>
浏览器将整个字符串解释为文件路径，即使“？”后面是什么。是参数。所以现在发生的事情是，下次更新文件时，只需更改网站上脚本标记中的数字（例如 <script src="myfile.js?version=1.0.1"></script>），每个用户的浏览器都会看到文件已更改并获取一个新副本。
【讨论】：
强制浏览器清除缓存或重新加载正确的数据？我已经尝试了stackoverflow中描述的大多数解决方案，有些工作，但过了一会儿，它最终会缓存并显示之前加载的脚本或文件。是否有另一种方法可以清除缓存（css、js 等）并在所有浏览器上实际运行？
到目前为止，我发现如果您更改服务器上文件的日期和时间，可以单独重新加载特定资源。 “清除缓存”并不像应有的那么容易。我没有清除浏览器上的缓存，而是意识到“触摸”缓存的服务器文件实际上会更改服务器上缓存的源文件的日期和时间（在 Edge、Chrome 和 Firefox 上测试），并且大多数浏览器会自动下载最您服务器上最新内容的最新副本（代码、图形以及任何多媒体）。我建议您在程序运行之前复制服务器上最新的脚本和“做触摸的事情”解决方案，这样它就会将所有问题文件的日期更改为最新的日期和时间，然后它将新副本下载到您的浏览器：
<?php
touch('/www/sample/file1.css');
touch('/www/sample/file2.js');
?>
然后......你的程序的其余部分......
我花了一些时间来解决这个问题（因为许多浏览器对不同命令的行为不同，但它们都会检查文件的时间并与您在浏览器中下载的副本进行比较，如果日期和时间不同，则会进行刷新） , 如果你不能走所谓的正确方法，总有另一种可用和更好的解决方案。最好的问候和快乐的露营。顺便说一下 touch();或替代方案适用于许多编程语言，包括 javascript bash sh php，您可以在 html 中包含或调用它们。
【讨论】：
对于 webpack 用户：-
我在我的 webpack 配置中添加了 chunkhash 的时间。这解决了我在每次部署时使缓存失效的问题。我们还需要注意 index.html/asset.manifest 没有缓存在您的 CDN 或浏览器中。 webpack 配置中的块名称配置如下所示：-
文件名：[chunkhash]-${Date.now()}.js
或者如果你使用的是 contenthash，那么
文件名：[contenthash]-${Date.now()}.js
【讨论】：
您要清除缓存，还是只是确保当前（更改？）页面没有被缓存？
如果是后者，应该就这么简单
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
【讨论】：
如果您是 Wordpress 开发人员，我有一些好消息要告诉您。
只需搜索、安装并激活名为：reBusted 的 Wordpress 插件。
无需配置。
如果内容已更新，它将自动强制刷新缓存，并且它完全可靠地解决了这个问题。已在数百个客户端 Wordpress 网站上测试和使用——在任何地方都能完美运行。
怎么推荐都不够。
如果您使用 Wordpress，这是迄今为止解决此问题的最佳选择和最优雅的解决方案。
享受吧！
【讨论】：