javascript - 如何在代码中控制，使发布后浏览器能够不使用缓存或清缓存？

Question

网站正在狂测阶段，每发布一版之后，有时候会因为缓存导致错误，请问如何用代码控制，使浏览器加载新版本时不要用缓存呢？

Answer 1

感谢大家的解答，我在这里将回答总结一下

写在前面
谢谢 @JounQin 的提点，这正是我所需要的功能。

你应该考虑的是如何实现文件版本号 hash 化而不是本末倒置去禁用缓存。
当然，本地开发环境直接禁用浏览器缓存即可。

---

meta 标签的控制

// 栗子如下
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

简单总结一下我刚才查的资料

• http-equiv=“pragma" 使用content属性的no-cache值表示是否缓存网页

• http-equiv=“expires" content设为日期能够控制缓存何时过期(注意必须使用GMT时间格式)，等于0或-1禁用缓存浏览本站

• 对于各项cache-control的解释，大家可以查看该链接

操作文件名使浏览器重新加载文件

可以在文件名后面加上MD5,时间戳,哈希值等随机数
比如我使用的是webpack打包，此时可以在webpack.config.js中对output的文件名进行配置

output: {
    filename: "[name]-[hash:6].js” // 加入了哈希
}

对请求的url带上参数

这个我还没有进行实践，希望能够有更详细的补充

可以参考 @小桃酥的曲奇饼 的方法

---

传送门：怎样禁止微信内置浏览器的缓存？

Answer 2

<script src="/js/jquery.2.js?v=20150409" type="text/javascript"></script>

这样喽

Answer 3

我用过ajax 的，希望能给你有点帮助

ajax('test.txt?t='+new Date().getTime(),function(str){ // 获取时间戳 改变文件地址，防止一直从缓存中获取文件

alert(str);

})

你们可以 后台PHP或者java 控制

Answer 4

<meta HTTP-equiv="Pragma" content="no-cache">

这个只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。

可以在文件的后面加个时间戳

Answer 5

1. 最方便的办法就是给URL直接加上时间戳类似 aa.com/?ver=2016093401

2. 给所有的JS,CSS后面加上/a.js?ver=2016093401

3. 后端语言 header禁用缓存

4. 前端HTML meta禁用缓存

Answer 6

你可以试试在页面最前面加上下面代码

Answer 7

你应该考虑的是如何实现文件版本号 hash 化而不是本末倒置去禁用缓存。

当然，本地开发环境直接禁用浏览器缓存即可。