本地主机环境下新窗口无法获取已设置Cookie的技术问询

这个问题我之前踩过好几次坑！你的代码能在当前页面写入Cookie但新窗口读不到，核心原因是Cookie的默认路径限制。

为什么会出现这个问题？ #

当你调用document.cookie设置Cookie但不指定path属性时，浏览器会自动把Cookie的路径设为当前页面的路径（比如你在/blog/detail.html页面设置的Cookie，默认path就是/blog/）。这就意味着只有在/blog/路径下的页面才能访问这个Cookie，新窗口如果打开的是根路径（/）或者其他子路径，自然读不到它。

怎么修改？ #

你只需要在设置Cookie时明确指定path=/，让Cookie在整个域名下的所有页面都能被访问到。修改后的setCookie函数如下：

function setCookie(key, value) {
  var expires = new Date();
  expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
  // 新增path=/，确保整个域名下都能访问该Cookie
  document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
}
setCookie('test', '1');

额外提醒 #

如果你的项目涉及跨子域（比如a.example.com和b.example.com），那还需要加上domain=.example.com（注意前面的点），这样不同子域的页面都能共享这个Cookie。示例：

document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + ';path=/;domain=.example.com';

现在再测试一下，设置Cookie后打开新窗口，应该就能正常读取到test这个Cookie了！

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