在JavaScript中清除缓存

时间：2009-06-18 09:02:01

标签： javascript caching

如何使用JavaScript清除浏览器缓存？

我们部署了最新的JavaScript代码，但我们无法获取最新的JavaScript代码。

编者注：这个问题在以下几个地方是半复制的，以下第一个问题的答案可能是最好的。这个接受的答案不再是理想的解决方案。

How to force browser to reload cached CSS/JS files?

How can I force clients to refresh JavaScript files?

Dynamically reload local Javascript source / json data

23 个答案:

答案 0 :(得分：185)

您可以致电window.location.reload(true)重新加载当前页面。它将忽略任何缓存的项目，并从服务器检索页面，CSS，图像，JavaScript等的新副本。这不会清除整个缓存，但会清除您所在页面的缓存。

但是，您最好的策略是对各种其他答案中提到的路径或文件名进行版本控制。另外，请参阅Revving Filenames: don’t use querystring，了解不使用?v=n作为版本控制方案的原因。

答案 1 :(得分：105)

您无法使用javascript清除缓存。 一种常见的方法是将修订号或上次更新的时间戳附加到文件中，如下所示：

myscript.123.js

或

myscript.js?updated=1234567890

答案 2 :(得分：37)

尝试更改JavaScript文件的src？由此：

<script language="JavaScript" src="js/myscript.js"></script>

对此：

<script language="JavaScript" src="js/myscript.js?n=1"></script>

此方法应强制您的浏览器加载JS文件的新副本。

答案 3 :(得分：18)

除了每小时或每周缓存外，您可以根据文件数据进行缓存。

示例（在PHP中）：

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

甚至使用文件修改时间：

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>

答案 4 :(得分：10)

您还可以强制在PHP中每小时重新加载代码：

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

或

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>

答案 5 :(得分：6)

尝试使用此

 <script language="JavaScript" src="js/myscript.js"></script>

对此：

 <script language="JavaScript" src="js/myscript.js?n=1"></script>

答案 6 :(得分：6)

将它放在模板的末尾：

var scripts =  document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){ 
   for(var j=0;j<torefreshs;j++){ 
      if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
        new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
        scripts[i].src = new_src; // change src in order to refresh js
      } 
   }
}

答案 7 :(得分：5)

或者您可以通过服务器使用file_get_contets读取js文件，然后在头文件中将回显放入js内容

答案 8 :(得分：5)

以下是我正在使用的最新项目的片段。

来自控制器：

if ( IS_DEV ) {
    $this->view->cacheBust = microtime(true);
} else {
    $this->view->cacheBust = file_exists($versionFile) 
        // The version file exists, encode it
        ? urlencode( file_get_contents($versionFile) )
        // Use today's year and week number to still have caching and busting 
        : date("YW");
}

从视图：

<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">

我们的发布过程会生成一个文件，其中包含当前版本的修订号。这通过URL编码该文件并将其用作缓存破坏程序来工作。作为故障转移，如果该文件不存在，则使用年份和周数，以便缓存仍然有效，并且每周至少刷新一次。

此外，这为开发环境中的每个页面加载提供了缓存清除，这样开发人员就不必担心清除缓存中的任何资源（javascript，css，ajax调用等）。

答案 9 :(得分：4)

如果你使用php可以做：

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>

答案 10 :(得分：3)

也许＆＃34;清除缓存＆＃34; 并不像应该的那样容易。我没有清除浏览器上的缓存，而是意识到＆＃34;触摸＆＃34; 该文件实际上会更改缓存在服务器上的源文件的日期（在Edge，Chrome和Firefox上测试）并且大多数浏览器会自动下载服务器上最新的最新副本（代码，图形也可以是任何多媒体）。我建议您在程序运行之前复制服务器上的最新脚本和＆＃34;触摸事物＆＃34; 解决方案，这样它会将所有问题文件的日期更改为最新的日期和时间，然后下载一个新的副本到您的浏览器：

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

......你的其他计划......

我花了一些时间来解决这个问题（因为许多浏览器对不同的命令采取不同的行动，但他们都检查文件的时间并与浏览器中下载的副本进行比较，如果不同的日期和时间，将进行刷新） ，如果你不能按照正确的方式行事，总会有另一个可用的更好的解决方案。最好的问候和快乐的露营。

答案 11 :(得分：3)

我对yboussard建议的代码有些麻烦。内部j循环不起作用。以下是我成功使用的修改后的代码。

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}

答案 12 :(得分：1)

我倾向于对我的框架进行版本化，然后将版本号应用于脚本和样式路径

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>

答案 13 :(得分：1)

window.parent.caches.delete("call")

在控制台中执行代码后关闭并打开浏览器。

答案 14 :(得分：1)

Cache.delete()可用于新的chrome，firefox和opera。

答案 15 :(得分：1)

请不要提供错误的信息。 Cache api是http cache

的另一种缓存类型 服务器发送正确的HTTP cache时会触发

headers，您无法使用javasvipt进行访问。

另一方面，

Cache api在需要时会被触发，与service worker一起使用时很有用，因此您可以将请求相交并从这种类型的缓存中应答 参见：ilustration 1 ilustration 2 course

您可以使用以下技术始终为用户提供新鲜的内容：

  1. 使用location.reload(true)不适用于我，因此我不建议这样做。
  2. 使用Cache api来保存到缓存中并与 向service worker请求，请谨慎处理，因为 服务器是否发送了cache headers所需的文件 要刷新，浏览器将首先从HTTP缓存进行应答，如果找不到，它将进入网络，因此您可能会得到旧文件
  3. 从您的stactics文件中更改url，我的建议是您应该使用文件内容的更改来命名它，我使用md5然后将其转换为对字符串和url友好的文件，并且md5会随着文件的内容，在那里您可以自由发送足够长的HTTP缓存头

我会推荐第三个see

答案 16 :(得分：1)

window.location.reload(true)似乎已被HTML5标准弃用。一种不使用查询字符串的方法是使用Clear-Site-Data header，似乎是being standardized。

答案 17 :(得分：1)

我最近找到了解决此问题的方法。就我而言，我试图使用 javascript 更新 html 元素；我一直在使用 XHR 根据从 GET 请求中检索到的数据更新文本。尽管 XHR 请求频繁发生，但缓存的 HTML 数据令人沮丧地保持不变。

最近，我在 fetch api 中发现了一种缓存破坏方法。 fetch api 取代了 XHR，使用起来超级简单。举个例子：

        async function updateHTMLElement(t) {
            let res = await fetch(url, {cache: "no-store"});
            if(res.ok){
                let myTxt = await res.text();
                document.getElementById('myElement').innerHTML = myTxt;
            }
        }

注意到 {cache: "no-store"} 参数了吗？这会导致浏览器破坏该元素的缓存，以便正确加载新数据。天哪，这对我来说真是天赐之物。我希望这对您也有帮助。

切向地，要破坏在服务器端更新但保留相同 src 属性的图像的缓存，最简单和最古老的方法是简单地使用 Date.now()，并附加该数字作为该图像的 src 属性的 url 变量。这适用于图像，但不适用于 HTML 元素。但是在这两种技术之间，您现在可以更新您需要的任何信息:-)

答案 18 :(得分：1)

大多数正确答案已在本主题中提及。但是我想添加一篇文章的链接，这是我能读到的最好的一篇。

https://www.fastly.com/blog/clearing-cache-browser

据我所知，最合适的解决方案是：

在 iframe 中发布。接下来是从建议的帖子中减去：

==============

const ifr = document.createElement('iframe');
ifr.name = ifr.id = 'ifr_'+Date.now();
document.body.appendChild(ifr);
const form = document.createElement('form');
form.method = "POST";
form.target = ifr.name;
form.action = ‘/thing/stuck/in/cache’;
document.body.appendChild(form);
form.submit();

有一些明显的副作用：这将创建一个浏览器历史记录条目，并且会遇到相同的响应非缓存问题。但它避开了 fetch 存在的预检要求，而且由于它是一种导航，拆分缓存的浏览器将清除正确的缓存。

这个差点就搞定了。 Firefox 会为跨源资源保留卡住的对象，但仅用于后续获取。每个浏览器都会使对象的导航缓存失效，无论是对于同源资源还是跨源资源。

================================

我们尝试了很多方法，但其中一种效果很好。唯一的问题是您需要能够以某种方式将此脚本带到最终用户页面，以便您能够重置缓存。在我们的特殊情况下，我们很幸运。

答案 19 :(得分：0)

您还可以使用元HTML标记禁用浏览器缓存，只需将html标记放在开头部分，以避免在编码/测试过程中缓存网页，完成后就可以删除元标记。

（在头部）

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

将其粘贴到头部后刷新页面，并且也应该刷新新的javascript代码。

如果需要，此链接将为您提供其他选择 http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

或者您可以像这样创建一个按钮

<button type="button" onclick="location.reload(true)">Refresh</button>

它会刷新并避免缓存，但是它会一直存在于您的页面上，直到您完成测试，然后才能将其删除。拳头选项是我最好的选择。

答案 20 :(得分：0)

只需添加new Date().getTime()链接的结尾即可，就像 呼叫

'https://stackoverflow.com/questions.php?' + new Date().getTime()

输出：https://stackoverflow.com/questions.php?1571737901173

因为浏览缓存相同的链接，您应该在链接末尾添加一个随机数。 new Date().getTime()产生一个不同的数字。

答案 21 :(得分：0)

我已经通过使用解决了这个问题 ETag

Etag与指纹相似，如果给定URL上的资源发生更改，则必须生成一个新的Etag值。通过比较它们可以确定资源的两种表示形式是否相同。

答案 22 :(得分：0)

参考： https://developer.mozilla.org/en-US/docs/Web/API/Cache/delete

Cache.delete（）

方法

语法：

cache.delete(request, {options}).then(function(found) {
  // your cache entry has been deleted if found
});
相关问题
最新问题