chrome浏览器多页签唯一关闭时自动注销

2024-05-14 19:32
文章标签 自动 浏览器 关闭 chrome 唯一 多页 注销

本文主要是介绍chrome浏览器多页签唯一关闭时自动注销，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

chrome浏览器多页签唯一关闭时自动注销

  • 整体思路
  • 多页签唯一思考
    • 探索window对象name的属性
      • window.name的特征
    • 页签唯一实现
  • 页签间共享信息思考
    • 页签数量的管理实现
  • 监听chrome浏览器页签关闭动作思考
    • 关闭动作监听实现
  • 自动注销思考
    • 注销代码实现
  • 测试出来的问题思考
    • 页签在打开状态的心跳实现
  • 总结

整体思路

技术背景：vue单页面应用
整体思路按如下问题展开：

  1. 多页签如何唯一?
  2. 页签唯一了，页签间如何共享信息？
  3. 页签间共享信息解决了，能否监听浏览器关闭动作？
  4. 浏览器关闭动作监听到了，如何自动注销？
  5. 自动注销实现了，是否还存在其他问题？

由上述问题可知，其中自动注销的最简单的实现，基本上就是清除浏览器记录的用户登录信息，一般都是清除相关的cookie。

多页签唯一思考

我们知道自动注销无非就是设置cookie的信息过期，实现自动清除用户的登录信息。用户在浏览器上对于同一系统只打开一个浏览器页签时，这样的实现是可以的。打开了多个页签的话，用此方式只能实现单点登出，即随意关闭一个页签导致其他页签全部注销了，这样的不符合需求和用户习惯的。我们现在的难题在于怎样识别是否只剩唯一一个页签。因此我们需要探索window对象的属性，找出可以标识页签的唯一的属性，这样就可以知道用户打开了哪些页签和关闭了哪些页签，以及最后只剩哪个页签。

探索window对象name的属性

我们通过网上查看window对象的相关属性，发现name属性可以标识页签的唯一

window.name的特征

  1. 每个页签都可以设置window.name，设置后的页签是独立的，无法打开相同window.name的页签；
  2. 可以直接赋值name，直接获取则返回当前页签名称，window.name默认是空字符串；
  3. window.name的数据类型是string，传递其他类型的数据都会转成string；

页签唯一实现

在页面加载时，如果window.name为空，则设置为UUID ，非空则跳过，说明已设置。

//main.js里插入以下代码
const uuid = require('uuid')
if(window.name===''){window.name=uuid.v4(); 
}

页签间共享信息思考

浏览器的存储对象有cookies、sessionStorage、localStorage，这里我们根据作者”pengc“的博客：cookies、sessionStorage和localStorage解释及区别，得知chrome使用localStorage最优，使用cookies会浪费带宽。
使用 localStorage 可以创建永不过期的本地存储的 name/value 对，而且value只能为string类型。我们需要记录多个打开的页签window.name，因此需要构建一个数组，而且其中window.name不能重复，然后转成json字符串存储。在页签关闭时去删除对应数组的元素就实现了页签的数量管理。

页签数量的管理实现

使用 localStorage创建key为Page-uuid，value为数组转成的json字符串的键值对，围绕这个键值对实现三个核心方法：获取页签的数量方法getPageNum，记录页签的window.name方法setPageUuid，清除数组中的页签记录removePageUuid。

//可以写到utils.js
const PageUuidKey = 'Page-uuid';
//获取页签的数量方法
export function getPageNum() {//获取原有的数组的json字符串let pageStr=localStorage.getItem(PageUuidKey);if(pageStr){//转成json数组let pageList=JSON.parse(pageStr);if(pageList){//返回数组长度return pageList.length;}}//其他情况直接返回0return 0;
}
//记录页签的window.name
export function setPageUuid(_uuid) {//有效毫秒数，根据需要设置let validPeriod=4000//获取原有的数组的json字符串let pageStr=localStorage.getItem(PageUuidKey);if(pageStr){//转成json数组let pageList=JSON.parse(pageStr);if(pageList){//判断是否已设置过该window.nameif(isExistsKV(pageList,'name',_uuid)){//已设置过该window.name，则重新设置失效时间let index=getItemIndexByKeyValue(pageList,'name',_uuid);pageList[index].expireTime=new Date().getTime()+validPeriod}else{//未设置过该window.name，则插入记录pageList.push({name:_uuid,expireTime:new Date().getTime()+validPeriod});}//更新localStorage的多页签记录localStorage.setItem(PageUuidKey,JSON.stringify(pageList));}}else{//没有设置过，则新增localStorage的多页签记录localStorage.setItem(PageUuidKey,JSON.stringify([{name:_uuid,expireTime:new Date().getTime()+validPeriod}]));}
}
//清除数组中的页签记录
export function removePageUuid(_uuid) {//获取原有的数组的json字符串let pageStr=localStorage.getItem(PageUuidKey);if(pageStr){//转成json数组let pageList=JSON.parse(pageStr);if(pageList){//获取需要清除的记录的数组下标let index=getItemIndexByKeyValue(pageList,'name',_uuid);if(index!==-1){//清除页签记录pageList.splice(index,1);//更新localStorage多页签记录localStorage.setItem(PageUuidKey,JSON.stringify(pageList));}}}
}
// 判断数组是否存在该对象
export function isExistsKV(items, key,value) {for(var i=0,len=items.length;i<len;i++){if(items[i][key]===value){return true}}return false
}
// 根据键值对获取对应的元素下标
export function getItemIndexByKeyValue(items,  key,value) {for(var i=0,len=items.length;i<len;i++){if(items[i][key]===value){return i}}return -1
}

监听chrome浏览器页签关闭动作思考

这里不讨论其他浏览器的关闭监听，有需要可以看看作者”云_飞扬“的博客：js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)，必须要感谢网上众多大神给予的帮助。
通过网上查找资料得知，chrome浏览器刷新和关闭都会按顺序触发window.onbeforeunload事件和window.onunload事件，两个事件间的时差长短可以作为判断页签的动作属于关闭还是刷新，不超过5毫秒的（<=5)的是关闭，否则是刷新。本人的测试了很多次，大部分时间是这样的，小部分出现问题。一直不知道这个原理是什么，望有大神能慷慨解答下。
关闭动作我们可以监听到了，页签唯一也设置了，那如何得知打开的页签只剩一个了，那我们需要找出可以应用共享的存储对象，这样就可以把打开的页签记录到共享的存储对象，关闭的页签则进行清除。

关闭动作监听实现

//单页应用的home主页上插入以下代码
mounted() {//这里省略其他无关的代码。。。//监听刷新和关闭的相关事件window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))window.addEventListener('unload', e => this.unloadHandler(e))//监听页签切换，清除监测页签定时器，下文再述	document.addEventListener('visibilitychange',e => this.clearCheckPageUuid(e))
},
methods: {//这里省略其他无关的代码。。。//window.onbeforeunload事件处理beforeunloadHandler(e) {this.beforeUnloadTime = new Date().getTime();},//window.onunload事件处理unloadHandler(e) {let _gap_time = new Date().getTime() - this.beforeUnloadTime;	//判断是窗口关闭还是刷新if (_gap_time <= 5) {//关闭处理this.closeHandler();}},//关闭处理closeHandler() {if (getPageNum() <= 1) {//注销，下文再述	this.logout()} else {//关闭当前页面this.closeCurrentPage()}},//关闭当前页面closeCurrentPage(){//注册页签定时器，下文再述	window.clearInterval(registerPageUuidInterval)//监测页签定时器，下文再述	window.clearInterval(checkPageUuidInterval)	//清除数组中的页签记录removePageUuid(window.name);}
},
destroyed() {//这里省略其他无关的代码。。。//注销，下文再述	this.logout()	//清除监听刷新和关闭的相关事件window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))window.removeEventListener('unload', e => this.unloadHandler(e))//清除页签切换的监听，下文再述	document.removeEventListener('visibilitychange',e => this.clearCheckPageUuid(e))//清除注册页签定时器，下文再述	window.clearInterval(registerPageUuidInterval)//清除监测页签定时器，下文再述	window.clearInterval(checkPageUuidInterval)		
}

自动注销思考

由于项目的登录信息是存储在cookie上，因此自动注销的实现，就是在页签唯一且关闭时设置cookie的登录信息过期即可。

注销代码实现

import Cookies from 'js-cookie'
methods: {//这里省略其他无关的代码。。。//注销,TokenKey为登录信息的key，自行设置logout() {//清除所有的多页签记录localStorage.removeItem(PageUuidKey);//设置过期，清除登录的cookie信息Cookies.set(TokenKey, '', {path: '/',expires: 0});},
}

测试出来的问题思考

其实在项目测试的过程中发现一些意外的情况我们没法避免，就是可能出现该清除的多页签记录没有清除，导致已经关闭的页面localStorage里还有记录，然后就会导致cookie无法清除，因为页签不可能只剩一个了。哪如何得知localStorage的多页签记录是有效的(即页面是打开的)？本人暂时没找到javascript可以直接根据window.name判断页面是否在打开的状态。如有大神知晓望能指教。
于是本人根据做大数据集群的思维，想到可以利用分布式的心跳机制来监测页面是否在打开的状态。
其实核心的实现就在未写出来的注册页签定时器方法registerPageUuidInterval、监测页签定时器方法checkPageUuidInterval和清除监测页签定时器方法clearCheckPageUuid

页签在打开状态的心跳实现

相信大家注意到在记录页签的window.name的方法中多页签记录的数组元素不是string类型，而是对象类型。关键是这个对象有失效时间expireTime这个属性，利用这个属性我们定时T监听是否失效，失效则清除记录即可；还在打开的页面为了不失效，则定时t去注册延长失效时间ts；为了保证监测页签定时器只有一个，因此需要监听页签的切换。打开多个页签会有多个监测页签定时器同时运行，除了会导致性能问题，还有可能和注册页签定时器产生冲突，因此只有切换到的页签去启动监测页签定时器即可。

这里的时间关系为：2*t<=ts<=T，本文设置为 t =2000毫秒，ts=4000毫秒，T=4000毫秒，具体频率按项目实际设置即可，不宜过短过长，过短则影响浏览器性能，过长则会延时出更多问题。

//可以写到utils.js
export function removeTimeoutPageUuid() {let pageStr=localStorage.getItem(PageUuidKey);if(pageStr){let pageList=JSON.parse(pageStr);if(pageList){let newList = [];let now = new Date().getTime()pageList.forEach(item => {if(now - item.expireTime<0){newList.push(item)}});pageList = newListlocalStorage.setItem(PageUuidKey,JSON.stringify(pageList));}}
}
//单页应用的home主页上插入以下代码
//监测页签定时器方法
var checkPageUuidInterval= self.setInterval(()=>{//每4秒清空过时的removeTimeoutPageUuid()},4000);
//注册页签定时器方法
var registerPageUuidInterval= self.setInterval(()=>{//每2秒注册pageuuidsetPageUuid(window.name)},2000);
export default {//这里省略其他无关的代码。。。methods: {//这里省略其他无关的代码。。。//切换页签，清除监测页签定时器方法clearCheckPageUuid(e){if(document.visibilityState==='hidden'){window.clearInterval(checkPageUuidInterval)}else{checkPageUuidInterval=self.setInterval(()=>{//每4秒清空过时的removeTimeoutPageUuid()},4000);this.setUserInfo()}},},//这里省略其他无关的代码。。。
}

总结

本文的核心技术实现总结为window.name和uuid实现页签的唯一，localStorage实现页签间的信息共享，监听beforeunload和unload事件实现关闭动作触发，window.setInterval定时器、监听visibilitychange事件和心跳机制实现页签打开状态的监控。

这篇关于chrome浏览器多页签唯一关闭时自动注销的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/989648。

相关文章

MyBatis-Plus 自动赋值实体字段最佳实践指南

MyBatis-Plus 自动赋值实体字段最佳实践指南

《MyBatis-Plus自动赋值实体字段最佳实践指南》MyBatis-Plus通过@TableField注解与填充策略,实现时间戳、用户信息、逻辑删除等字段的自动填充,减少手动赋值,提升开发效率与... 目录1. MyBATis-Plus 自动赋值概述1.1 适用场景1.2 自动填充的原理1.3 填充策略
阅读更多...
MySQL逻辑删除与唯一索引冲突解决方案

MySQL逻辑删除与唯一索引冲突解决方案

《MySQL逻辑删除与唯一索引冲突解决方案》本文探讨MySQL逻辑删除与唯一索引冲突问题,提出四种解决方案：复合索引+时间戳、修改唯一字段、历史表、业务层校验,推荐方案1和方案3,适用于不同场景,感兴... 目录问题背景问题复现解决方案解决方案1.复合唯一索引 + 时间戳删除字段解决方案2：删除后修改唯一字
阅读更多...
python生成随机唯一id的几种实现方法

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1：使用 UUID 模块（推荐）方法 2：使用 Secrets 模块（安全敏感场景）方法
阅读更多...
Python通用唯一标识符模块uuid使用案例详解

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数
阅读更多...
SpringBoot+Docker+Graylog 如何让错误自动报警

SpringBoot+Docker+Graylog 如何让错误自动报警

《SpringBoot+Docker+Graylog如何让错误自动报警》SpringBoot默认使用SLF4J与Logback,支持多日志级别和配置方式,可输出到控制台、文件及远程服务器,集成ELK... 目录01 Spring Boot 默认日志框架解析02 Spring Boot 日志级别详解03 Sp
阅读更多...
浏览器插件cursor实现自动注册、续杯的详细过程

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机
阅读更多...
如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

《如何在Mac上彻底删除Edge账户?手动卸载Edge浏览器并清理残留文件技巧》Mac上的Edge账户里存了不少网站密码和个人信息，结果同事一不小心打开了，简直尴尬到爆炸，想要卸载edge浏览器并清... 如果你遇到 Microsoft Edge 浏览器运行迟缓、频繁崩溃或网页加载异常等问题，可以尝试多种方
阅读更多...
Python如何将OpenCV摄像头视频流通过浏览器播放

Python如何将OpenCV摄像头视频流通过浏览器播放

《Python如何将OpenCV摄像头视频流通过浏览器播放》：本文主要介绍Python如何将OpenCV摄像头视频流通过浏览器播放的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完... 目录方法1：使用Flask + MJPEG流实现代码使用方法优点缺点方法2：使用WebSocket传输视
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
一文详解MySQL如何设置自动备份任务

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2