Chrome关闭标签页后清除localStorage Vuejs项目JWT令牌丢失问题

以下是Chrome浏览器独有的、会触发该问题的常见场景：

• Chrome浏览器开启了关闭时清除站点数据规则：如果在Chrome「隐私和安全」设置中开启了「关闭所有窗口时清除Cookie及站点数据」，或者单独给当前应用站点配置了关闭时清除存储的例外规则，localStorage作为站点本地存储的一部分，会在标签页/浏览器关闭时被自动清除。Opera GX未配置对应规则所以表现正常。
• 非安全上下文的存储限制：如果你的应用未通过HTTPS部署（本地开发用localhost除外），Chrome会将其判定为非安全上下文，对localStorage的存储周期做额外限制，会话结束后自动清除存储内容。
• 代码逻辑适配问题：如果应用的初始化、路由守卫等逻辑中存在针对Chrome用户代理的特殊判断，可能误触发了localStorage.removeItem("token")或localStorage.clear()操作，导致令牌被主动删除。
• 无痕浏览模式：如果是在Chrome无痕模式下访问应用，该模式下的localStorage本身就是会话级存储，关闭标签页后会直接清空所有存储内容。

• 调整Chrome站点权限设置：打开Chrome设置→隐私和安全→Cookie和其他站点数据，确认「关闭所有窗口时清除Cookie及站点数据」未开启；如果需要保留该全局设置，可以将你的应用站点添加到「始终可以使用Cookie的网站」列表中，豁免站点存储的清除规则。
• 部署时使用HTTPS协议：除本地开发环境外，线上环境务必使用HTTPS协议部署，避免Chrome的非安全上下文存储限制。
• 排查代码误删逻辑：可以添加存储事件监听，定位令牌被删除的触发时机：

// 监听同域下所有localStorage修改操作
window.addEventListener('storage', (e) => {
  console.log('存储项变更：', e.key, '旧值：', e.oldValue, '新值：', e.newValue)
})

如果监听结果显示token是被主动删除的，排查对应业务逻辑中的特殊判断分支即可。

• 多存储介质兼容：读取令牌时增加降级逻辑，优先读localStorage，读取失败再读sessionStorage，两者都不存在再跳转登录页，避免单一存储被清除直接触发重登。
• 长效登录态优化：搭配HttpOnly类型的刷新令牌实现无感登录，即使localStorage被清除，也可以用刷新令牌请求后端换取新的JWT，不需要用户手动重新登录。

内容的提问来源于stack exchange，提问作者Brahim Bessrour