js清除浏览器缓存的几种方法

JS 缓存的问题一直都是我们又爱又恨的东西。也是我们比较头痛的问题，一方面为了提高网站响应速度,减少服务器的负担,和节省带宽，将需要将静态资源缓存在客户端，但是另一方面，当js 文件有改动的时候，如何快速的将客户端缓存的js文件都失效，这是非常头痛的问题。以至于每次客户反馈问题的时候，我们第一个解决办法都是清理浏览器缓存。

一、使用参数

第一、脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区别。即上面代码对于文件来说等价于但浏览器会认为他是该文件的某个版本！

第二、客户端会缓存这些css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新下载新的js或css文件，刷新缓存的作用。

第二种情况最多，也可能两种同时存在。版本号，可以是一个随机数，也可以是一个递增的值，大版本小版本的方式，或者根据脚本的生成时间书写，比如就是精确到了生成脚本的秒，而 2.3.3 就是大版本小版本的方式。

二、清除浏览器缓存的几种方法

1. meta方法

//不缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0">

2. 清理form表单的临时缓存

<body onLoad="javascript:document.yourFormName.reset()">

其实form表单的缓存对于我们书写还是有帮助的，一般情况不建议清理，但是有时候为了安全问题等，需要清理一下！

3. jquery ajax清除浏览器缓存

方法一，用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,如下:

$.ajax({
    url:'www.haorooms.com',
    dataType:'json',
    data:{},
    beforeSend :function(xmlHttp){ 
	    xmlHttp.setRequestHeader("If-Modified-Since","0"); 
	    xmlHttp.setRequestHeader("Cache-Control","no-cache");
    },
    success:function(response){
        //操作
    }
    async:false
});

方法二，直接用cache:false,

$.ajax({
    url:'www.haorooms.com',
    dataType:'json',
    data:{},
    cache:false, 
    ifModified :true ,

    success:function(response){
        //操作
    }
    async:false
});

方法三：用随机数，随机数也是避免缓存的一种很不错的方法！

URL 参数后加上 “?ran=” + Math.random(); //当然这里参数 ran可以任意取了

方法四：用随机时间，和随机数一样。

在 URL 参数后加上 “?timestamp=” + new Date().getTime();

4. 用php后端清理

在服务端加 header(“Cache-Control: no-cache, must-revalidate”);等等(如php中)