如何不指定过期时间修改JavaScript Cookie值？为何生成新Cookie？

这个问题我之前踩过坑！其实核心是浏览器识别Cookie的规则在起作用——浏览器判断两个Cookie是否是同一个，不只是看名称，而是要匹配「名称、域名、路径、Secure标记、是否为持久Cookie（有无expires/max-age）」这一整套属性组合。

为什么会创建新Cookie？ #

当你执行document.cookie = name + "=" + result;时，浏览器会给这个新Cookie套上默认属性：

• 路径默认是当前页面的路径（比如你在/blog页面设置，路径就是/blog），而不是根路径/；
• 没有设置expires或max-age，所以这是一个会话Cookie（关闭浏览器就失效）；
• 域名默认是当前域名的子域名（如果原Cookie是顶级域名的话也不匹配）。

如果原来的Cookie和这些默认属性不一致（比如原Cookie是path=/的持久Cookie），浏览器就会把新设置的当成另一个独立的Cookie，于是就出现了同名但值不同的两个Cookie共存的情况。

怎么在不修改过期时间的情况下解决？ #

要覆盖原Cookie，必须保证新设置的Cookie和原Cookie的所有标识属性完全一致。具体步骤如下：

1. 明确原Cookie的属性：可以通过浏览器开发者工具的Application面板查看原Cookie的path、domain、Secure等属性，这些属性一般也是你当初设置Cookie时指定的。
2. 修改时带上所有匹配的属性：只更新value，其他属性和原Cookie保持一致，不需要改动expires。

举几个实际的代码例子：

• 如果原Cookie是path=/的会话Cookie：

// 原Cookie：name=oldValue;path=/
document.cookie = `${name}=${newValue};path=/`;

• 如果原Cookie是带域名的持久Cookie：

// 原Cookie：name=oldValue;path=/;domain=.yourdomain.com;expires=Fri, 31 Dec 2024 23:59:59 GMT
// 保留原expires值，只修改value
document.cookie = `${name}=${newValue};path=/;domain=.yourdomain.com;expires=Fri, 31 Dec 2024 23:59:59 GMT`;

你也可以写一个通用函数来简化操作：

function updateCookie(name, newValue) {
  const cookies = document.cookie.split('; ');
  let hasExistingCookie = false;
  
  for (const cookie of cookies) {
    const [cookieName] = cookie.split('=');
    if (cookieName === name) {
      hasExistingCookie = true;
      // 根据实际情况补充原Cookie的path、domain等属性
      document.cookie = `${name}=${newValue};path=/`;
      break;
    }
  }
  
  if (!hasExistingCookie) {
    document.cookie = `${name}=${newValue};path=/`;
  }
}

这样就能保证修改的是同一个Cookie，而不会创建新的啦！

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