浏览器页面显示的缓存问题解决

很多时候在修改页面、css和js完成后,上传发现没有效果,这主要是因为浏览器会对一些资源进行缓存,在加载时还是使用的以前的资源,下面是归纳的几种方法。
1.对于html缓存,可以使用meta标签,强制禁止浏览器缓存。

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

2.对于js和css文件的缓存处理,可以在文件后面加参数(用版本号),或者添加随机数、随机时间,Math.random(),new Date().getTime()。

<link rel="stylesheet" href="../css/register.css?v=20180110"/>
<script src="../scripts/register.js?v=20180110"></script>

3.form表单清除缓存。

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

4.使用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
 });

总结:
这些方法都可以清除缓存,但是也不保证是百分百正确。因为我们只关注了客户端,却忽略了服务器端的设置,如果服务器端nginx设置了Cache-control,他是会覆盖掉我们页面中设置的的Cache-control的,所以有时候我们会发现明明css和js已经加了版本号,但是html文件里面引用的依然是旧的css和js文件,因为服务器的缓存机制,旧的css和js并不会被立即删除,这种情况下, 我们需要和服务器端(或者运维)人员协商一个统一的缓存策略,以保证更新可以及时得到效果,如果沟通不顺利,或者想立刻看到效果,可以试试 如果服务器端没有去设置Pragma,我们设置的Pragma依然有效。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值