使用React-Cookie及原生JS设置的会话Cookie关闭浏览器后未过期

问题现象 #

• 使用react-cookie包或原生JavaScript设置无过期时间的会话Cookie，浏览器确实将其标记为会话Cookie，但关闭浏览器后Cookie并未被自动删除
• 带有明确过期时间的Cookie能正常按时失效，该问题在Chrome和Microsoft Edge浏览器中均出现

排查方向与解决方法 #

1. 浏览器的“会话恢复”功能在作祟 #

目前Chrome、Edge等主流浏览器默认开启了“启动时恢复上次会话”的功能，为了还原之前打开的页面，浏览器会保留会话Cookie：

• 操作步骤：
  1. 打开浏览器设置，找到「启动时」选项（Chrome路径：设置 > 启动时）
  2. 将选项改为「打开新标签页」，而非「从上次中断的地方继续」
  3. 同时检查「隐私和安全 > Cookie和网站数据」，确认未开启“允许网站保存和读取Cookie数据”之外的特殊权限
• 注意要完全关闭浏览器（包括所有后台进程），而非仅关闭窗口，部分浏览器最小化到托盘也会保留进程。

2. 显式指定Cookie的SameSite属性 #

部分情况下，未明确设置SameSite属性可能导致浏览器对会话Cookie的处理逻辑异常，建议显式指定默认的Lax值：

• 原生JavaScript设置示例：

let randomValue = Math.ceil(Math.random() * 10000);
document.cookie = "Fcookie=" + randomValue + "; path=/; SameSite=Lax";

• react-cookie设置示例：

import { useCookies } from 'react-cookie';

const [, setCookie] = useCookies(['Fcookie']);
const randomValue = Math.ceil(Math.random() * 10000);
setCookie('Fcookie', randomValue, { path: '/', sameSite: 'Lax' });

3. 检查浏览器后台进程是否残留 #

如果仅关闭浏览器窗口，但后台仍有浏览器进程在运行，会话Cookie会被进程保留：

• 通过系统任务管理器（Windows：Ctrl+Shift+Esc；Mac：Cmd+Opt+Esc）找到所有浏览器相关进程，全部结束后重新打开浏览器，再查看Cookie是否已被清除。

4. 确认站点未被加入Cookie例外列表 #

若浏览器将当前站点设置为“始终允许保存Cookie”，会覆盖会话Cookie的生命周期规则：

• 操作步骤：
  1. 打开浏览器的「Cookie和网站数据」设置页面
  2. 找到对应站点的Cookie设置，确认未勾选“始终允许”或类似的永久保存选项

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