浏览器关闭/标签页全部关闭,退出登录状态 | 您所在的位置:网站首页 › 退出当前状态 › 浏览器关闭/标签页全部关闭,退出登录状态 |
实现效果:1、浏览器关闭/标签页全部关闭/点击退出按钮,退出登录状态。2、浏览器同时只能登录一个账号,登录一次后,其他标签页打开全部进入首页。 分析: 在登录成功后保存账号相关信息。 打开标签页浏览器执行onload事件方法,刷新页面执行onbeforeunload ——》onload事件方法,关闭浏览器和关闭标签页执行onbeforeunload 事件方法。 难点:浏览器并未提供单独关闭浏览器和关闭标签页的方法。 解决方案:利用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); };
|
CopyRight 2018-2019 实验室设备网 版权所有 |