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

我们部署了最新的JavaScript代码,但是我们无法获得最新的JavaScript代码。

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

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

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

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


当前回答

在PHP中,你也可以强制每小时重新加载一次代码,就像这样:

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

or

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

其他回答

或者你可以通过服务器用file_get_contts读取js文件,然后在js内容的头中放入echo

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

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

在PHP中,你也可以强制每小时重新加载一次代码,就像这样:

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

or

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

最近我找到了解决这个问题的办法。在我的情况下,我试图更新一个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元素无效。但在这两种技术之间,你可以更新任何你现在需要的信息:-)