如何用JavaScript清除浏览器缓存?
我们部署了最新的JavaScript代码，但是我们无法获得最新的JavaScript代码。
编者按:这个问题在以下几个地方有半重复，下面第一个问题的答案可能是最好的。这个公认的答案不再是理想的解决方案。
如何强制浏览器重新加载缓存的CSS/JS文件?
如何强制客户端刷新JavaScript文件?
动态重载本地Javascript源/ json数据
当前回答
把这个放在模板的末尾:
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
}
}
}
其他回答
最近我找到了解决这个问题的办法。在我的情况下，我试图更新一个html元素使用javascript;我一直在使用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()，并将该数字作为url变量附加到该图像的src属性。这对图像可靠，但对HTML元素无效。但在这两种技术之间，你可以更新任何你现在需要的信息:-)
除了每小时或每周缓存一次之外，您还可以根据文件数据进行缓存。
示例(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>
window.parent.caches.delete("call")
在控制台中执行代码后，关闭并打开浏览器。
由于浏览器缓存相同的链接，您应该在url末尾添加一个随机数。 new Date(). gettime()生成一个不同的数字。
只需添加新的Date().getTime()链接结束 调用
'https://stackoverflow.com/questions.php?' + new Date().getTime()
输出:https://stackoverflow.com/questions.php?1571737901173
或者你可以通过服务器用file_get_contts读取js文件，然后在js内容的头中放入echo
