JS清除浏览器缓存方法：Meta、Ajax及后端Header设置详解

浏览器缓存机制概述

关于浏览器缓存

浏览器缓存机制在提升网站加载速度和性能方面具有重要作用，能显著改善用户体验。然而，在某些场景下，缓存可能导致数据过时或错误，例如股票等需要实时更新的网站，或者当缓存引发显示异常时，必须采取措施清除缓存以确保数据准确性。本文将重点介绍几种有效的清除缓存策略。

清理网站缓存的几种方法

HTML Meta标签清除缓存

meta方法


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

Form表单缓存处理

清理form表单的临时缓存

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

Form表单的自动填充和缓存功能通常有助于用户快速填写信息，因此一般不建议随意清除。但在涉及敏感数据或安全要求较高的场景下，可能需要强制清理表单缓存以防止信息泄露或误用。

jQuery Ajax请求防缓存策略

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缓存控制

用php后端清理

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

页面替换防止后退缓存

方法五：

window.location.replace("WebForm1.aspx");

参数就是你要覆盖的页面，replace的原理就是用当前页面替换掉replace参数指定的页面。

这样可以防止用户点击back键。使用的是javascript脚本，举例如下：

a.html

以下是引用片段：


<html> 
   <head> 
     <title>a</title>   
     <script language="javascript"> 
       function jump(){ 
         window.location.replace("b.html"); 
       } 
     </script> 
   </head> 
   <body> 
    <a href="javascript:jump()" rel="external nofollow" rel="external nofollow" >b</a> 
  </body> 
</html>

b.html