浏览器关闭/标签页全部关闭，退出登录状态

实现效果：1、浏览器关闭/标签页全部关闭/点击退出按钮，退出登录状态。2、浏览器同时只能登录一个账号，登录一次后，其他标签页打开全部进入首页。

 分析：

1. 在登录成功后保存账号相关信息。
2. 打开标签页浏览器执行onload事件方法，刷新页面执行onbeforeunload ——》onload事件方法，关闭浏览器和关闭标签页执行onbeforeunload 事件方法。
3. 难点：浏览器并未提供单独关闭浏览器和关闭标签页的方法。
4. 解决方案：利用onbeforeunload 和onload事件的执行顺序，在onload事件方法里清除账号信息，退出登录。

 

运行分析：

1)：首次打开页面执行onload方法，如果第一次打开，localTime,sesTime,numbers都没有值，执行第一个If语句，清除localStorage和sessionStorage的值，重新给localTime,sesTime赋值，numbers++,此时numbers=0。

2)：刷新页面先执行onbeforeunload 方法，当前localTime,sesTime有值且相等，numbers--，此时numbers=0;然后再执行onload方法。此时localTime,sesTime有值，numbers++,此时numbers=1;

3)：再次打开新的标签页，执行onload方法，此时localTime有值并且numbers=1，执行第二个if语句，给sesTime赋值。numbers++,此时numbers=2;

 

 代码：

//刷新页面时，首先进入onbeforeunload 方法

window.onbeforeunload = () => {

　　let numbers = window.localStorage.getItem('numbers');

　　const sesTime = window.sessionStorage.getItem('sesTime');

　　const localTime = window.localStorage.getItem('localTime');

　　//当localTime 没有值，并且sesTime === localTime，减去当前页。

　　if (localTime != 'NaN' && localTime != null && sesTime === localTime) {

　　　　numbers = parseInt(numbers) - 1;

　　　　window.localStorage.setItem('numbers', numbers)

　　}

};

 

window.onload = () => {

　　let time = '';

　　let numbers = window.localStorage.getItem('numbers');//计算打开的标签页数量

　　const sesTime = window.sessionStorage.getItem('sesTime');

　　const localTime = window.localStorage.getItem('localTime');//首次登录的时间

 

//当numbers无值或者小于0时，为numbers 赋值0

if (numbers == 'NaN' || numbers === null || parseInt(numbers) < 0) {

　　numbers = 0;

}

//sesTime || localTime 没有值，并且numbers为0时，清除localStorage里的登录状态，退出到登录页面

if ((sesTime === null || sesTime === 'NaN' || localTime === null ||

localTime === 'NaN') && parseInt(numbers) === 0) {

localStorage.clear();

sessionStorage.clear();

//为localTime和sesTime赋值，记录第一个标签页的时间

time = new Date().getTime();

window.sessionStorage.setItem('sesTime', time);

window.localStorage.setItem('localTime', time);

router.push('/login');

}

//当time ，localTime 有值，并且sesTime != localTime时，为sesTime赋值

if (!time && localTime != 'NaN' && localTime != null && sesTime != localTime) {

　　window.sessionStorage.setItem('sesTime', localTime);

}

//最后保存当前是第几个标签页

numbers = parseInt(numbers) + 1;

window.localStorage.setItem('numbers', numbers);

};