深入浅出：前端浏览器缓存、清除缓存的几种方法

介绍一个浏览器缓存机制的原理：

一、meta方法有时候谷歌等浏览器不支持

 
<METAHTTP-EQUIV="pragma"CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
 

清理form表单的临时缓存：<body onLoad="javascript:document.yourFormName.reset()">

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

二、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();

方法五：用php后端处理。

在 URL 参数后加上在服务端加 header("Cache-Control: no-cache, must-revalidate");

秒客网

深入浅出：前端浏览器缓存、清除缓存的几种方法

相关文章