如何实现浏览器关闭清除用户数据，同浏览器新标签免登录？

我最近在用C#和JavaScript开发Web应用时，也碰到了完全相同的需求——用户登录后，在同一个浏览器的新标签打开应用不需要重新登录，但关闭整个浏览器时要清除登录数据。折腾了好几种方案，终于找到正确的路子，分享给你：

我踩过的那些无效坑 #

• localStorage 和持久化Cookie：这俩会把数据存在本地硬盘，就算关闭浏览器再打开，数据还留着，完全不符合“关闭浏览器清除”的要求
• sessionStorage：这个确实会在标签页关闭时清数据，但新打开的标签页根本读不到它里面的内容，用户切个新标签就得重新登录，完全不满足需求
• window.unload 事件：我当时写了$(window).on('unload', function (e) { /* 清除数据逻辑 */ });，结果发现不仅关闭标签页会触发，页面刷新的时候也会执行清除操作，这显然不是我们要的效果

最终解决办法：用「会话Cookie（Session Cookie）」 #

问题其实出在我最开始创建Cookie的方式上——之前随手加了expires或者max-age属性，把Cookie做成了持久化Cookie，这类Cookie会被存在硬盘里，浏览器关闭也不会消失。

只要去掉Cookie中的expires（或max-age）属性，它就会自动变成会话Cookie：

• 会话Cookie是存在浏览器内存里的（不同浏览器实现细节有差异，但核心逻辑一致）
• 同一个浏览器的所有标签页都能共享这个Cookie，新标签打开不用重新登录
• 当用户关闭整个浏览器时，会话Cookie会被自动清除，完美匹配需求

举个JS创建会话Cookie的例子：

// 正确创建会话Cookie：不设置expires/max-age
document.cookie = "userId=123; path=/; secure; HttpOnly";
// 注：path=/ 确保整个站点都能访问这个Cookie，secure和HttpOnly是安全最佳实践，可根据你的场景调整

如果是用C#后端设置Cookie，只要不设置Expires或MaxAge属性就行：

var cookie = new Cookie("userId", "123")
{
    Path = "/",
    Secure = true,
    HttpOnly = true
    // 不要设置 Expires 和 MaxAge 属性
};
Response.Cookies.Append(cookie);

这样设置后，就能完美实现你要的效果：同浏览器多标签共享登录状态，关闭浏览器自动清除数据。

内容的提问来源于stack exchange，提问作者Jinto Jacob