清除JavaScript中的缓存

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

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

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

---

无法使用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>

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

---

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

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

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

---

在PHP中，您还可以强制每小时重新加载代码，如下所示：

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

或

---

以下是我在最新项目中使用的代码片段

从控制器：

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; ?>">

您可以调用以重新加载当前页面。它将忽略任何缓存项，并从服务器检索页面、css、图像、JavaScript等的新副本。这不会清除整个缓存，但会清除您所在页面的缓存

但是，您最好的策略是按照各种其他答案中提到的方式对路径或文件名进行版本设置。此外，有关不使用
？v=n
作为版本控制方案的原因，请参阅。
将此内容放在模板末尾：

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.length;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
      } 
   }
}

var scripts=document.getElementsByTagName（'script'）；
var torefreshs=['myscript.js'，'myscript2.js']；//要刷新的js列表
var key=1；//每次需要强制刷新时更改此键
对于（var i=0；i或者，您可以通过服务器读取js文件，其中包含file_get_contets，然后将js内容放在头中的echo中，而不是每小时或每周缓存一次，您可以根据文件数据进行缓存

示例（在PHP中）：

我在使用YBoossard建议的代码时遇到了一些问题。内部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;
            }
        }
    }
}

函数重载脚本（toRefreshList/*要刷新的js列表*/，key/*每次需要强制刷新时都更改此键*/）{
var scripts=document.getElementsByTagName（'script'）；
对于（var i=0；i-1））{
new_src=aScript.src.replace（toRefresh，toRefresh+'？k='+键）；
//console.log（'Force refresh on cached script files.From:'+aScript.src+'到'+new_src））
aScript.src=new_src；
}
}
}
}
如果使用php，可以执行以下操作：

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

尝试使用此

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



为此：

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

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



在控制台中执行代码后关闭并打开浏览器。
可用于新的chrome、firefox和opera。
也许清除缓存“并不像应该的那么容易。我没有在浏览器上清除缓存，而是意识到触摸”该文件实际上会更改缓存在服务器上的源文件的日期（在Edge、Chrome和Firefox上进行测试），大多数浏览器会自动下载服务器上最新的内容副本（代码、图形和多媒体）。我建议您只需在服务器上复制最新的脚本即可在程序运行之前执行“触摸操作”解决方案，以便将所有问题文件的日期更改为最新日期和时间，然后将新副本下载到浏览器：

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



…你计划的其他部分

我花了一些时间来解决这个问题（因为许多浏览器对不同的命令有不同的行为，但它们都会检查文件的时间，并与您在浏览器中下载的副本进行比较，如果不同的日期和时间，将进行刷新），如果你不能走正确的路，总会有另一个更好的解决办法。祝你愉快，露营愉快。
请不要提供错误的信息。
是不同于的缓存类型

当服务器发送正确的消息时触发，您无法使用javasvipt访问

另一方面，当您需要时触发，它在处理时非常有用，这样您就可以从这种类型的缓存中交叉请求并回答它
见：

您可以使用这些技术在您的用户上始终保留新内容：

使用这个对我不起作用，所以我不会推荐它
使用以保存到缓存中并与
请求，小心这一点，因为
如果服务器已发送所需文件的
要刷新，浏览器将首先从HTTP缓存中应答，如果找不到，则会转到网络，这样您就可以使用和旧文件
从你的stactics文件更改url，我的建议是你应该用文件内容的更改来命名它，我使用它，然后将其转换为字符串和url友好型，md5将随文件的内容而更改，在那里你可以自由发送足够长的HTTP缓存头
我推荐第三个
您也可以使用meta HTML标记禁用浏览器缓存，只需将HTML标记放在标题部分，以避免在编码/测试时缓存网页，完成后可以删除meta标记

（在标题部分）



在头部粘贴后刷新页面，也应该刷新新的javascript代码

如果您需要，此链接将为您提供其他选项

或者你可以创建一个这样的按钮

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

刷新

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

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

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

cache.delete(request, {options}).then(function(found) {
  // your cache entry has been deleted if found
});

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