前端清除浏览器缓存的几种办法

不知道大家有没有遇到缓存的问题:有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据。像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的。今天主要介绍清除缓存的几种方法。


用HTML标签设置HTTP头信息

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

  说明:HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时,浏览器重新访问服务器已获取页面。如下是使用Cache-Control的基本方法:
  1) no-cache:强制缓存从服务器上获取新的页面;
  2) no-store: 在任何环境下缓存不保存任何页面

  HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache,同样可以包含在头信息中。

  

清理Form表单的临时缓存

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


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


小结

除了前端可以清除缓存外,后端也可以,比如同样往头部添加信息等;尽管缓存的问题需要前后端以及运维同学的共同配合,但是根据页面需要来判断是否需要缓存,对于前端同学来说还是至关重要的。