强制浏览器清除缓存

Question

有没有办法在我的页面上放置一些代码，以便当有人访问网站时，它会清除浏览器缓存，以便他们可以查看更改？

使用的语言：ASP.NET、VB.NET，当然还有 HTML、CSS 和 jQuery。

Answer 1

如果这是关于 .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.

您可以检查此链接到看看它是如何运作的。

Answer 2

查看 缓存控制 和 cache-control 。 i18nguy.com/markup/metatags.html" rel="noreferrer">过期 META 标记。

另一种常见做法是将不断变化的字符串附加到请求的末尾文件。例如：

Answer 3

2012 更新

这是一个老问题，但我认为它需要更新的答案，因为现在有一种方法可以更好地控制网站缓存。

在 离线 Web 应用程序（实际上是任何 HTML5 网站）applicationCache.swapCache() 可用于更新缓存您网站的版本，无需手动重新加载页面。

这是来自 HTML5 Rocks 上使用应用程序缓存初学者指南的代码示例，解释了如何更新用户访问您网站的最新版本：

// 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 开发者网络上的使用应用程序缓存更多信息。

2016 年更新

网络上的事物变化很快。
这个问题是在 2009 年提出的，2012 年我发布了关于处理问题中描述的问题的新方法的更新。又四年过去了，现在看来它已经被弃用了。感谢cgaldiolo在评论中指出这一点。

目前，截至 2016 年 7 月，HTML 标准第 7.9 节，离线 Web 应用程序 包含弃用警告：

此功能正在从 Web 平台中删除。
（这是一个漫长的过程，需要很多年。）使用任何
此时离线 Web 应用程序功能是非常不鼓励的。
请改用服务人员。

我在 2012 年引用的 Mozilla 开发者网络上的 使用应用程序缓存也是如此：

已弃用
此功能已从 Web 标准中删除。
尽管某些浏览器可能仍然支持它，但它正在开发中
被丢弃。不要在旧项目或新项目中使用它。页面或网络应用程序
使用它可能随时中断。

另请参阅错误 1204581 - 如果启用了服务工作线程获取拦截，则为 AppCache 添加弃用通知。

Answer 4

不是这样的。一种方法是在传送内容时发送适当的标头以强制浏览器重新加载：

确保网页不会在所有浏览器中被缓存。

如果您在 SO 上搜索 “缓存标头” 或类似内容，您将查找 ASP.NET 的具体示例。

如果您无法控制服务器端的标头，另一种不太干净但有时唯一的方法是向正在调用的资源添加随机 GET 参数：

myimage.gif?random=1923849839

Answer 5

我遇到了类似的问题，这就是我解决它的方法：

1. 在 index.html 文件中我添加了清单：

   ;
   

2. 在 部分中包含更新缓存的脚本：

3. 在部分我插入了onload函数：

4. 在 cache.manifest 中，我放置了我想要的所有文件缓存。现在重要的是，它在我的情况（Apache）中只需更新每次“版本”注释即可工作。还可以选择使用“?ver=001”或名称末尾的其他内容来命名文件，但不需要。仅更改 # version 1.01 就会触发缓存更新事件。

   缓存清单
   # 版本 1.01
   样式.css
   imgs/标志.png
   #所有其他文件
   

   在 index.html 中仅包含 1.、2. 和 3. 点非常重要。否则

   GET http://foo.bar/resource.ext net::ERR_FAILED
   

   发生的原因是每个“子”文件都试图在页面已经缓存的情况下缓存该页面。

5. 在 update_cache.js 文件中，我放置了以下代码：

   函数 checkForUpdate()
   {
       if (window.applicationCache！=未定义&&window.applicationCache！= null)
       {
           window.applicationCache.addEventListener('updateready', updateApplication);
       }
   }
   函数更新应用程序（事件）
   {
       if (window.applicationCache.status != 4) 返回；
       window.applicationCache.removeEventListener('updateready', updateApplication);
       window.applicationCache.swapCache();
       window.location.reload();
   }
   

现在您只需更改文件，并在清单中更新版本注释。现在访问index.html页面将更新缓存。

解决方案的各个部分不是我的，但我通过互联网找到了它们并将它们组合在一起，以便它可以工作。

Answer 6

对于静态资源，正确的缓存是使用查询参数以及每个部署或文件版本的值。这将在每次部署后清除缓存。

/Content/css/Site.css?version={FileVersionNumber}

这是 ASP.NET MVC 示例。

<link href="@Url.Content("~/Content/Css/Reset.css")[email protected]().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

不要忘记更新程序集版本。

Answer 7

2023 年起

在撰写本文时，大多数主流 Web 浏览器（Safari 除外）都支持 Clear-Site-Data HTTP 标头 [MDN 参考]。

要指示客户端 Web 浏览器清除网站域和子域的浏览器缓存，请在服务器的 HTTP 响应中设置以下标头：

Clear-Site-Data: "cache"

或者，以下标头可能会更好地跨浏览器支持，但它会清除其他网站数据，例如除了浏览器缓存之外，还有 localStorage 和 cookies。

Clear-Site-Data: "*"

Answer 8

我有一个案例，我会在线拍摄客户的照片，如果照片发生更改，则需要更新 div。浏览器仍然显示旧照片。所以我使用了调用随机 GET 变量的技巧，该变量每次都是唯一的。这是如果它可以帮助任何人

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

编辑
正如其他人指出的那样，以下是更有效的解决方案，因为它仅在图像发生更改时才会重新加载图像，并通过文件大小识别此更改：

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

Answer 9

很多答案都没有抓住要点——大多数开发人员都清楚关闭缓存效率低下。然而，在许多常见情况下，效率并不重要，并且默认缓存行为被严重破坏。

其中包括嵌套的迭代脚本测试（最重要的！）和损坏的第三方软件解决方法。此处给出的解决方案都不足以解决此类常见情况。大多数网络浏览器的缓存过于激进，并且没有提供避免这些问题的明智方法。

Answer 10

将 URL 更新为以下内容对我来说很有效：

/custom.js?id=1

通过在 ?id= 后面添加唯一的数字并针对新更改递增该数字，用户可以不必按 CTRL + F5 来刷新缓存。或者，您可以在 ?id= 之后附加当前时间或 Epoch 的哈希或字符串版本，

例如 ?id=1520606295

Answer 11

<meta http-equiv="pragma" content="no-cache" />

另请参阅 https://stackoverflow .com/questions/126772/how-to-force-a-web-browser-not-to-cache-images

Answer 12

这里是有关在 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

Answer 13

不确定这是否真的对您有帮助，但这就是缓存在任何浏览器上的工作方式。当浏览器请求文件时，它应该始终向服务器发送请求，除非有“离线”模式。服务器将读取一些参数，例如修改日期或 etag。

服务器将返回 NOT MODIFIED 的 304 错误响应，浏览器将不得不使用其缓存。如果 etag 未在服务器端验证或修改日期低于当前修改日期，则服务器应返回带有新修改日期或 etag 或两者的新内容。

如果没有缓存数据发送到浏览器，我猜行为是不确定的，浏览器可能会也可能不会缓存不告诉它们如何缓存的文件。如果您在响应中设置缓存参数，它将正确缓存您的文件，然后服务器可能会选择返回 304 错误或新内容。

应该这样做。在 url 中使用随机参数或版本号更像是一种黑客行为。

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分钱！

Answer 14

我实现了这个适合我的简单解决方案（尚未在生产环境中）：

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所在的位置：

“versio.txt”：

v00.5.0014

在我的所有页面中都会调用此函数，因此在加载时会检查如果 localStorage 的版本值低于当前版本，并执行

location.reload(true);

...强制从服务器而不是从缓存重新加载。

（显然，您可以使用 cookie 或其他持久客户端存储来代替 localStorage）

我选择此解决方案是因为它简单，因为仅维护单个文件“versio.txt”将强制重新加载整个站点。

queryString 方法很难实现，而且也会被缓存（如果从 v1.1 更改为以前的版本将从缓存加载，那么这意味着缓存不会刷新，将所有以前的版本保留在缓存中）。

我是一个小新手，非常感谢您的专业检查和指导。检查以确保我的方法是一个好的方法。

希望有帮助。

Answer 15

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

浏览器将整个字符串解释为文件路径，即使“?”后面的内容也是如此。是参数。所以现在发生的情况是，下次更新文件时，只需更改网站上脚本标记中的数字（示例

Answer 16

在workers js中

self.addEventListener('message', function(event){
    msg = event.data;
    if (msg==='clearCache') {
        console.log('Starting to cache clean.');
        deleteCacheAndMetadata("WebFontFiles"); 
        deleteCacheAndMetadata("Static");
        deleteCacheAndMetadata("WebFontCss");
        deleteCacheAndMetadata("Assets");
        deleteCacheAndMetadata("Tweets");
        console.log('Cache Cleaned');
    }
});

async function deleteCacheAndMetadata(cacheName) {
  await caches.delete(cacheName);
  const cacheExpiration = new CacheExpiration(cacheName);
  cacheExpiration.delete();
}

，然后在标题代码中添加this js变量。`

<script>
var updateRequire = false; // or true
</script>

最后添加此页脚代码

window.addEventListener('load', function(e) {
 if (updateRequire) {
   navigator.serviceWorker.controller.postMessage('clearCache');
   if (confirm("Application updated! Please confirm to reload page!")) window.location.reload();
 }
},false);

Answer 17

除了设置 Cache-control: no-cache 之外，如果您希望每次都刷新本地副本，还应该将 Expires 标头设置为 -1（某些版本的 IE 似乎需要这样做）。

请参阅 HTTP 缓存 - 检查服务器，始终发送 If-Modified-Since

Answer 18

强制浏览器清除缓存或重新加载正确的数据？我已经尝试了 stackoverflow 中描述的大多数解决方案，有些有效，但过了一会儿，它最终会缓存并显示以前加载的脚本或文件。是否有另一种方法可以清除缓存（css、js 等）并在所有浏览器上实际工作？

到目前为止，我发现如果您更改服务器上文件的日期和时间，可以单独重新加载特定资源。 “清除缓存”并不像应有的那么容易。我意识到“触摸”缓存的服务器文件实际上会更改服务器上缓存的源文件的日期和时间（在 Edge、Chrome 和 Firefox 上测试），而不是清除浏览器上的缓存，并且大多数浏览器会自动下载最多的文件服务器上内容的最新副本（代码、图形以及多媒体）。我建议您在程序运行之前复制服务器上最新的脚本和“执行触摸操作”解决方案，这样它会将所有问题文件的日期更改为最新的日期和时间，然后它会下载一个新的副本到您的浏览器：

<?php
   touch('/www/sample/file1.css');
   touch('/www/sample/file2.js');
?>

然后...程序的其余部分...

我花了一些时间来解决这个问题（因为许多浏览器对不同命令的行为不同，但它们都会检查文件的时间和与您在浏览器中下载的副本进行比较，如果日期和时间不同，则会进行刷新），如果您不能按照假定的正确方式进行操作，那么总有另一个可用且更好的解决方案。致以最诚挚的问候，祝露营愉快。顺便说一下触摸（）；或者替代方案适用于许多编程语言，包括 javascript bash sh php，您可以在 html 中包含或调用它们。

Answer 19

对于 webpack 用户：-

我在 webpack 配置中添加了 chunkhash 时间。这解决了我在每次部署时使缓存失效的问题。此外，我们还需要注意，index.html/ asset.manifest 不会同时缓存在您的 CDN 或浏览器中。 webpack 配置中块名称的配置将如下所示：-

fileName: [chunkhash]-${Date.now()}.js

或如果您使用 contenthash 那么

fileName: [contenthash]-${Date.now()} .js

Answer 20

这是我使用 PHP 在我的一个应用程序中解决的简单解决方案。

所有 JS 和 CSS 文件都放置在带有版本名称的文件夹中。示例：“1.0.01”

root\1.0.01\JS
root\1.0.01\CSS

创建了一个 Helper 并在那里定义了版本号

<?php
function system_version()
{
    return '1.0.07';
}

以及链接的 JS 和 SCC 文件，如下所示

<script src="<?= base_url(); ?>/<?= system_version();?>/js/generators.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>/<?= system_version(); ?>/css/view-checklist.css" />

每当我对任何 JS 或 CSS 文件进行更改时，我都会更改 Helper 中的系统版本并重命名该文件夹并部署它。

Answer 21

我遇到了同样的问题，我所做的就是更改链接到我的index.html 文件的文件名，然后进入index.html 文件并更新它们的名称，这不是最佳实践，但如果它有效，它就有效。浏览器将它们视为新文件，因此它们会重新下载到用户设备上。

例子：
我想更新一个css文件，其名为styles.css，将其更改为styless.css

进入index.html并更新，并将其更改为

Answer 22

如果有兴趣，我找到了让浏览器在 .NET MVC (.net fw 4.8) 和使用捆绑包的上下文中刷新 .css 和 .js 的解决方案。
我想让浏览器仅在部署新程序集后刷新缓存文件。

根据 Paulius Zaliaduonis 的响应，我的解决方案如下：

1. 将您的应用程序基本 url 存储在 Web 配置应用程序设置中（在 RegisterBundle 期间，HttpContext 在运行时尚不可用...），然后根据配置更改此参数（ debug、staging、release...)通过xml变换
2. 在BundleConfig RegisterBundles中通过反射的方式获取程序集版本，并且...
3. ...更改样式和脚本的默认标签格式，以便捆绑系统生成链接以及在其上附加查询字符串参数的脚本标记。

这是代码，

public static void RegisterBundles(BundleCollection bundles)
{
   string baseUrl = system.Configuration.ConfigurationManager.AppSettings["by.app.base.url"].ToString();
       
   string assemblyVersion = Assembly.GetExecutingAssembly().GetName().Version.ToString();
   
   Styles.DefaultTagFormat = $"<link href='{baseUrl}{{0}}?v={assemblyVersion}' rel='stylesheet'/>";
   Scripts.DefaultTagFormat = $"<script src='{baseUrl}{{0}}?v={assemblyVersion}'></script>";
}

您将获得标签，就像

<script src="https://example.org/myscriptfilepath/script.js?v={myassemblyversion}"></script>

您只需要记住在部署之前构建新版本一样。

再见

Answer 23

您想清除缓存，还是只是确保当前（已更改？）页面未被缓存？

如果是后者，应该很简单

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">