进行更改时清除客户端浏览器的缓存

Question

使用 HTML/CSS 开发网站时，在开发阶段防止缓存是有意义的，因为浏览网站的人会看到旧版本。在使用元标记之前，我已经看到了这方面的线程，即：

<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />enter code here

但是，这似乎适用于 HTML5，同样我只想在我进行更新后将客户端缓存清空。

例如，如果我在 index.html 中有一个图像并更新此图像（相同的文件名不同的内容），那么客户端将看到以前的图像

有没有一种方法可以对 html 页面进行版本控制，以便客户端浏览器缓存版本 1，然后在重新加载时如果我将 html 更改为版本 2，缓存将被清空并加载包含所有更改的新网站？

似乎在大多数 Web 开发中都需要如此，否则客户将永远看不到变化

Answer 1

您可以在索引页面中编辑<link> 文件（或在文件中加载的任何位置。在.css 之后，您需要输入类似?v=...的查询

像这样：

旧文件：<link href="/css/TestFile.css" rel="stylesheet">

编辑后刷新缓存：<link href="/css/TestFile.css?v=1" rel="stylesheet">v代表版本，可以使用任意字符。

这将为访问该网站的每个人重置缓存并让他们看到新版本而不是旧版本

Answer 2

在您的头部内容中添加以下内容 -

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Answer 3

就我而言，我对一个特定的 JS 文件进行了很多更改，并且我需要它在所有正在使用的浏览器中处于其最新版本。

我没有此文件的特定版本号，所以我只是散列当前日期和时间（小时和分钟）并将其作为版本号传递：

<script src="/js/panel/app.js?v={{ substr(md5(date("Y-m-d_Hi")),10,18) }}"></script>

我需要每分钟加载一次，但您可以决定何时重新加载。