【vue】vue 关闭浏览器窗口的时候,清空localStorage的数据 |
您所在的位置:网站首页 › vuex缓存用户数据 › 【vue】vue 关闭浏览器窗口的时候,清空localStorage的数据 |
vue 关闭浏览器窗口的时候,清空localStorage的数据 如果是用vue做的单页面程序的时候,将监听的方法放在App.vue是最灵活的 export default { data () { return { theme: this.$store.state.app.themeColor }; }, mounted () { }, beforeDestroy () { }, methods: { }, mounted(){ // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据 window.onbeforeunload = function (e) { var storage = window.localStorage; storage.clear() } } }; html,body{ width: 100%; height: 100%; background: #f0f0f0; overflow: hidden; } .app-main{ width: 100%; height: 100%; }二、如果是多页面的程序的话,在每一个页面同理只要在mounted方法中,注册这个事件即可! 如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页 最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人或者离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了一段时间会自动清空cookie。 经过我查资料,自身尝试网上的各种方法,发现都有问题。 总结这一路的尝试: 一、页面加载时只执行onload ,页面关闭时只执行onunload,页面刷新时先执行onbeforeunload,然后onunload,最后onload。 经过验证我得出的结论是: (1)对于ie,谷歌,360: //页面加载时只执行onload//页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。//页面关闭时,先onbeforeunload事件,再onunload事件。 (2)对于火狐: //页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload事件那么回归正题,到底怎样判断浏览器是关闭还是刷新?我按照网上的各种说法实验千百遍,都未成功, 二、机智的判断页面刷新还是关闭 关键点:刷新完成之后会执行onload方法,根据session存标志变量来清空cookie 我的思路是:刷新和关闭,无论哪个浏览器都会执行onunload方法或者onbeforeunload方法,其实我们在这两个方法里是判断不了的,但是在刷新之后会再一次执行onload方法,所以我在这两个方法里将一个标志位变量放在session里。然后在onload方法执行的时候判断session里是否有这个变量,有的话,说明是刷新,不然就是关闭。 import Cookies from 'js-cookie' /*区分关闭和刷新,关闭退出登录 start*/ window.onload = function(){ if(!window.sessionStorage["tempFlag"]){ Cookies.remove('userId') Cookies.remove('userName') location.reload(); //不能省,强制跳到登陆页 }else{ window.sessionStorage.removeItem("tempFlag"); } } window.onunload = function (){ window.sessionStorage["tempFlag"] = true; } window.onbeforeunload = function (){ window.sessionStorage["tempFlag"] = true; }目前项目中使用时可行的,不足的地方:一个系统的多个页面同时打开,关掉其中一个页面也会清空cookie,重新登录 谁让项目登录用的是cookie存,如果换成session存登录信息就不一样了 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |