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

时间:2024-03-11 12:01:18

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

https://blog.csdn.net/u014590757/article/details/80140654

https://www.cnblogs.com/vajoy/p/5341664.html 

https://www.jianshu.com/p/1a1536ab01f1 ;

一、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");

相关文章