JS 浏览器禁用缓存的方法

920 阅读1分钟

方法一:添加时间戳

let time = new Date().getTime()
// js 注意闭合标签里的转义<\\/script>
document.write('<script type='text/javascript' src="a.js?t=' + time + '"><\/script>')
// css
document.write('<link rel="stylesheet" href="a.css' + time + '">')
// 图片
let src = 'imgsrc'+time
//特别说下图片的这个加时间戳很好用,我记得当时canvas有个情况是第一次取图片正常,之后从内存里取图片缓存就会报跨域错误,加了这个时间戳让他每一次都重新获取就好了。

方法二:添加版本号

  可以向上面一样手动加,vue项目的话可以在配置里配置一下,让webpack在打包时添加。

module.exports={
    chainWebpack: config => {
        config.optimization.minimize(true)
        // 给js和css配置版本号
        config.output.filename('js/[name].' + version + '.js').end()
        config.output.chunkFilename('js/[name].' + version + '.js').end()
        config.plugin('extract-css').tap(args => [{
            filename: `css/[name].${version}.css`,
            chunkFilename: `css/[name].${version}.css`
        }])
    },
}

方法三:meta标签设置

<meta http-equiv="Cache-Control" content="no-store"/> 
<meta http-equiv="Pragma" content="no-cache"/> 
<meta http-equiv="Expires" content="0"/>