如何使用Javascript检测整个浏览器关闭事件？

方案1：直接使用会话级Cookie（最适配你的需求） #

你要实现的效果本身就是浏览器会话级Cookie的默认特性，完全不需要手动检测浏览器关闭行为：

• 生成Cookie时不要设置Expires和Max-Age属性，这种Cookie会被浏览器自动标记为会话级Cookie
• 会话级Cookie只会在用户完全关闭整个浏览器进程时被自动清除，单个标签页关闭、甚至同一浏览器下所有同域标签页都关闭只要浏览器进程还在，Cookie就会保留
• JS侧生成示例：document.cookie = "自定义Cookie名=对应值; path=/; SameSite=Lax"，只要没有配置过期时间就是会话级
  这个方案完全规避了监听关闭事件的兼容性问题，是当前场景的最优解。

方案2：需要手动检测浏览器关闭的其他场景 #

如果你的业务逻辑需要在浏览器关闭时执行除删除Cookie之外的其他操作，目前没有100%准确的前端API可以区分「关闭单个标签」和「关闭整个浏览器」，但可以通过以下逻辑做近似判断：

• 监听beforeunload事件时，配合window.localStorage统计当前浏览器的同域活跃标签页数量
  • 每个标签页加载完成时，读取localStorage中存储的activeTabCount值，加1后写回
  • 每个标签页触发beforeunload时，读取activeTabCount值，减1后写回
  • 如果减1后的值为0，即可判定是最后一个同域标签页被关闭，近似认为是浏览器关闭（注意如果用户仅打开了一个你的网站标签，关闭这个标签时也会触发，这是目前前端侧无法避免的误差）
• 不要尝试通过窗口大小属性判断，你之前的判断是正确的：beforeunload和unload事件触发时，浏览器已经开始回收页面资源，不会提供准确的窗口属性，且窗口大小和浏览器是否关闭没有必然关联。
• 注意：如果要在这个时机操作Cookie，建议在beforeunload事件回调里同步执行，unload阶段很多浏览器会限制DOM、Cookie、异步请求等操作，大概率不生效。

补充说明：所有前端侧的关闭事件监听都不是100%可靠的，比如浏览器崩溃、进程被强制杀死、系统关机等场景都不会触发beforeunload事件，如果你的业务对Cookie删除的可靠性要求极高，建议配合后端的会话过期策略做兜底。

内容的提问来源于stack exchange，提问作者Junho Ahn