zoukankan      html  css  js  c++  java
  • 前端清除缓存方法(微信缓存引起的bug)

    bug1:在新版微信中,部门安卓机子(华为)出现window.location.href/window.location.reload....等方法来刷新本页面链接,发现页面没有被刷新,经过排查,发现是因为缓存原因。

    解决方案:这时候给链接加一个时间戳来解决页面缓存!!!

    时间撮:

    var myDate = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/.[d]{3}Z/,'');

    解决缓存方案二:利用pagehide/pageshow 事件

    会话(Session)中的某一个页面显示/隐藏时,会触发 pagehide 和 pageshow 事件。 这两个事件都有一个 persisted 属性用来指示当前页面是否被 BF Cache 缓存。 因此可以通过 persisted 属性来达到禁用 BF Cache 的效果:

    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload() 
        }
    };

    注意 pageshow 不仅在显示被缓存的页面时触发,在第一次加载页面时也会触发。 因此需要检测事件的 persisted 属性,页面第一次加载时它的值是 false

    另外 pageshow 的时机总是在 load 事件之后。 这一点很容易检测,比如下面的代码中 pageshow 日志总在 load 之前打印:

    window.addEventListener('pageshow', function () {
      console.log('on pageshow')
    })
    window.addEventListener('load', function () {
      console.log('load')
    })

    XHR 缓存

    解决缓存方案三:时间撮或者随机变量

    详细参考https://harttle.land/2017/03/12/backward-forward-cache.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">

    清理form表单的临时缓存

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

    其实form表单的缓存对于我们书写还是有帮助的,一般情况不建议清理,但是有时候为了安全问题等,需要清理一下!

    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后端处理。

    在 URL 参数后加上 在服务端加 header("Cache-Control: no-cache, must-revalidate");

  • 相关阅读:
    程序员面视题解析
    Forms身份验证
    梅花雨日历控件
    系统架构师学习笔记_第四章(下)
    系统架构师学习笔记_第三章
    系统架构师学习笔记_第六章(上)
    系统架构师学习笔记_第五章(下)
    系统架构师学习笔记_第一章
    系统架构师学习笔记_第四章(上)
    系统架构师学习笔记_第五章(上)
  • 原文地址:https://www.cnblogs.com/qdlhj/p/10084293.html
Copyright © 2011-2022 走看看