页面关闭,刷新区分-------清除浏览器缓存

1、对于谷歌,ie,360

页面加载时只执行onload

页面关闭时先执行onbeforeunload,最后onunload

页面刷新时先执行onbeforeunload,然后onunload,最后onload

2、对于火狐

页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload

3、页面刷新、关闭判断

思路:在cookie中添加标志位tempFlag,刷新和关闭都会执行onbeforeunload和onunload事件,因此,在onload中判断session中的tempFlag存在时为刷新,当关闭页面后tempFlag被移除,cookie的清除是在再次进入网页时tempFlag不存在于是清除cookie重新加载,具体代码如下:

import util from '@/libs/util'  //根据自己的cookie封装文件引入

window.onbeforeunload=event=>{

  window.sessionStorage["tempFlag"]=true

}

window.onload=event=>{

  if(!window.sessionStorage['tempFlag']){

    util.cookies.remove("token")

    location.reload()//重新加载必须写,原因是在onload时页面cookie已经生成,此时清除cookie页面也不会有反应,若不写,则加载的仍是原cookie页面,而不是清除后的

  }else{

    window.sessionStorage.removeItem("tempFlag")

  }

}

window.onunload = event => {

  window.sessionStorage["tempFlag"]=true

  };

我的cookie封装文件:util.cookie.js

import Cookies from 'js-cookie'

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 区分浏览器关闭和刷新 有这样一个需求,关闭浏览器标签页之后,再次通过历史记录进入时不能直接进入,而是要重新登录之后...
    彼得潘北北阅读 11,674评论 0 12
  •   支持离线 Web 应用开发是 HTML5 的另一个重点。   所谓离线 Web 应用,就是在设备不能上网的情况...
    霜天晓阅读 4,781评论 0 2
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 7,532评论 0 25
  • 本文转载自前端工匠,如有侵权联系立刻删除 一、Cookie ...
    qiaoguoxing阅读 2,755评论 0 0
  • “客户您好,请问您办理什么业务?~~请您慢走再见......"每天都是这一套,时刻提醒自己微笑的面对各类客户,每天...
    yuki大太阳阅读 2,166评论 0 2

友情链接更多精彩内容