前端清除缓存的集中方法

孑立-码农

已于 2023-04-19 14:01:35 修改

阅读量5.6k

点赞数 1

文章标签：前端缓存 javascript

于 2022-06-30 20:02:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_39813207/article/details/125547367

版权

本文介绍了前端清除缓存的多种方法，包括通过meta标签设置HTTP头部信息，清理form表单的临时缓存，使用ajax请求时添加特定请求头，以及利用随机数或时间戳防止资源缓存。这些技巧对于确保用户获取最新内容和避免浏览器缓存问题至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端清除缓存的集中方法
　1：meta标签

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">

2：清理form表单的临时缓存

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

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

关于缓存问题：js清除缓存
1、一般手动清除，浏览器缓存

2、js代码清除缓存（原理：增加了一个参数，且该参数是一个随机数，每次都不一样，所以每次的请求参数都不一样，服务器会将其作为一个新的请求，重新返回结果，而不会使用缓存）

js文件: 路径后面加一个随机数如下：

<script src="lib/gMarker.js?random=120211"></script>

 css文件 <link rel='stylesheet' href='css/index.css?t=120224'>   加一个标识 强制浏览器重新加载此文件

图片文件： background:url(**.png?20150421) 加一个标识号，使图片不被缓存