清除JavaScript中的缓存

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

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

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

如何强制浏览器重新加载缓存的CSS / JS文件？

如何强制客户端刷新JavaScript文件？

动态重新加载本地Javascript源/ json数据

您可以调用window.location.reload（true）重新加载当前页面。它将忽略所有缓存的项目，并从服务器检索页面，css，图像，JavaScript等的新副本。这不会清除整个缓存，但是会清除您所在页面的缓存。

但是，最好的策略是按照其他答案中所述的方式对路径或文件名进行版本控制。此外，请参阅修订文件名：出于不用?v=n作版本控制方案的原因，请勿使用querystring。

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

myscript.123.js

要么

myscript.js?updated=1234567890

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

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

对此：

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

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

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

示例（在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>

您也可以像这样在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>

将其放在模板的末尾：

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
      } 
   }
}

尝试使用这个

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

对此：

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

这是我最新项目使用的片段。

从控制器：

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调用等）的缓存。

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

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

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

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

我花了一些时间解决此问题（许多浏览器对不同的命令采取不同的操作，但是它们都检查文件的时间并与浏览器中下载的副本进行比较，如果日期和时间不同，则会进行刷新），如果不能以正确的方式前进，总是有另一个可用且更好的解决方案。最好的问候和快乐的露营。

我对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;
            }
        }
    }
}

如果您使用的是php可以做到：

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

Cache.delete（）可用于新的chrome，firefox和Opera。

请不要提供不正确的信息。 缓存api是与http缓存不同的缓存类型

服务器发送正确的标头时会触发HTTP缓存，您无法使用javasvipt访问。

另一方面，您会在需要时触发缓存api，与服务工作者一起使用时它很有用，因此您可以将请求与此类缓存相交并进行响应，请参阅：ilustration 1 ilustration 2 课程

您可以使用以下技术在您的用户上始终拥有新鲜的内容：

1. 使用location.reload（true）这对我不起作用，因此我不建议这样做。
2. 使用Cache API以便保存到缓存中并与Service Worker相交，请小心这一点，因为如果服务器发送了缓存头要刷新的文件，浏览器将首先从HTTP缓存中进行应答，如果找不到它，它将进入网络，因此您可能会得到旧文件
3. 从您的stactics文件中更改url，我的建议是您应该使用文件内容的更改来命名它，我使用md5，然后将其转换为对字符串和url友好的文件，md5会随着文件内容的变化而变化，在那里可以自由发送HTTP缓存头足够长的时间

我建议第三位看到

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

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

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

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

您也可以使用元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>

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

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

只需new Date().getTime()像呼叫一样添加链接的结尾

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

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

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