vue 判断窗口是关闭还是刷新笔记

当前项目需求  ：

1.在同一浏览器只能登录一个账号

2.在该浏览器下可以多窗口操作这一账号

3.当浏览器窗口刷新时不做任何操作，如果关闭浏览器则要清空登录信息

 

一：

首先把登录信息缓存在本地，通过localStorage

不用sessionStorage，因为sessionStorage缓存的数据在通过浏览器地址栏输入地址打开新窗口时 会新建一个

他们之间不共享，除非是在当前窗口点击链接跳转才会共享

而localStorage则存在本地，不管开多少窗口都会共享登录信息这一数据

这一步实现上面 1，2 两个需求

二：

判断窗口是刷新还是关闭实现第 3 个需求

首先在App.vue里面 定义mounted 钩子函数

mounted(){ /** *判断浏览器窗口是刷新或者关闭操作 * 无论任何浏览器不管是刷新或者是关闭都会执行下面两个方法 onbiforeunload onunload * 根据时间差来实现 * 在点击刷新或者关闭时开始计时记录下这一刻的时间戳 * 因为刷新和关闭 在执行onunload方法时的时间不一样，一般情况下经过测试 * 关闭时时间差不大于3毫秒 * 刷新时即使只有一个简单的helloworld页面都不少于10毫秒 * 而一般网站网页内容更多，时间差达到了100多毫秒 * * * 下面方法的缺点是不管你开了多少窗口，都会在关闭一个窗口时清空所有localStorage缓存 * 造成所有页面都需要重新登录，其实这也是针对项目而言的，目前本项目就不认为这是缺点 * 而能更好的保护用户信息 **/ let beginTime = 0;//开始时间 let differTime = 0;//时间差 window.onunload = function (){ differTime = new Date().getTime() - beginTime; if(differTime <= 5) localStorage.clear(); }; window.onbeforeunload = function (){ beginTime = new Date().getTime(); }; }

在此记录，该思路是借鉴别人的，链接已经找不到了，修改后适用于vue

满足项目要求