如何用JavaScript实现关闭浏览器窗口或标签时设置及更新Cookie

核心思路是监听浏览器的beforeunload事件，该事件会在窗口卸载（关闭、刷新、跳转）前同步触发，你可以在回调中完成Cookie的过期删除和新建操作。

完整实现代码 #

// 1. 初始创建业务所需Cookie
document.cookie = "type=banner;expires=Thu, 25 Nov 2020 08:50:17 GMT;path=/";

// 2. 监听窗口卸载事件
window.addEventListener('beforeunload', () => {
  // 先将原有Cookie设置为过期（expires设为过去的时间即可删除）
  document.cookie = "type=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
  // 创建新的Cookie
  document.cookie = "type=popup;expires=Thu, 25 Nov 2020 08:50:17 GMT;path=/";
});

注意事项 #

• 操作Cookie时建议统一携带path=/属性，避免不同路径下Cookie作用域隔离导致的修改不生效问题。
• 目前没有100%可靠的方案可以区分「关闭标签页/窗口」和「刷新页面/跳转至其他站点」，上述代码在刷新、跳转场景下也会触发。如果你的业务需要严格区分这两类场景，可以结合sessionStorage做辅助判断：页面加载时判断sessionStorage是否存在自定义标记，存在则说明是刷新/同站跳转，不存在则为首次打开，对应调整Cookie逻辑即可。
• 浏览器强制结束进程、崩溃等极端场景下不会触发beforeunload事件，此时Cookie修改逻辑不会执行，建议根据业务场景做好兜底兼容。
• 如果你不需要Cookie持久存储，仅希望浏览器关闭后自动失效，可以直接不设置expires/max-age属性，此类Cookie为会话级Cookie，浏览器关闭后会自动清除。

内容的提问来源于stack exchange，提问作者Arun Bohra