前端开发JavaScript清除浏览器缓存的方法

时间：2024-03-07 13:43:37

查看和删除浏览器缓存的方法=====》打开

最近在开发项目中发现有时候总要频繁地清除浏览器缓存，不然总是显示的过时的信息

浏览器缓存有利有弊，有些数据需要缓存下来使得页面打开更快提高网站性能，但有些缓存内容又必须清除，缓存可能会导致一些错误数据被展示。

介绍一些清除浏览器缓存的方法：

方法一：利用meta标签

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

这种方法很简单，但不是所有浏览器都支持的，像chrome这种强制使用缓存的浏览器就没有用

方法二：jquery ajax清除浏览器缓存

//用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Contro
$.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){
         //do something
     }
     async:false
  });


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

     success:function(response){
         //do something
     }
     async:false
  });

方法三：url后面加上随机数（字母）或者当前时间戳

URL ?ran=" + Math.random();
URL ?timestamp=+ new Date().getTime();

方法四：在js后面加日期戳

虽然看起来和url加随机数一样，但原理不同，这种最好所有js文件采用公共引入文件的形式，可以省去一些麻烦

<script src="/res/js/plugins/metisMenu/jquery.metisMenu.js?${.now?string(\'yyyy-MM-dd\')}"></script>

方法五：后端处理

相关文章