如何使用js-cookie获取.domain.com与domain.com下的同名Cookie？

问题原因 #

js-cookie的get()方法解析Cookie时，会以Cookie名称作为对象键名，当存在同名但不同域的Cookie时，后解析到的Cookie值会覆盖先解析的，导致无法获取所有同名Cookie。

解决方案：手动解析原生document.cookie #

由于js-cookie的封装逻辑限制，要获取同名不同域的Cookie，需要直接操作document.cookie并自定义解析逻辑：

import Cookies from 'js-cookie';

// 自定义函数：获取所有Cookie，包含域名信息
function getAllCookiesWithDomain() {
  return document.cookie.split(';').map(cookie => {
    const [nameValue, ...attrs] = cookie.trim().split(';');
    const [name, value] = nameValue.split('=').map(decodeURIComponent);
    const cookieObj = { name, value };
    // 解析domain属性
    const domainAttr = attrs.find(attr => attr.trim().startsWith('domain='));
    if (domainAttr) {
      cookieObj.domain = domainAttr.trim().split('=')[1];
    }
    return cookieObj;
  });
}

// 获取指定名称的所有Cookie（含不同域）
function getCookieWithDomain(name) {
  return getAllCookiesWithDomain().filter(cookie => cookie.name === name);
}

// 使用示例
Cookies.set('myCookie', 'myValue1', {domain: '.domain.com'});
Cookies.set('myCookie', 'myValue2', {domain: 'domain.com'});

// 获取所有同名Cookie
console.log(getCookieWithDomain('myCookie'));
// 输出：[{name: 'myCookie', value: 'myValue1', domain: '.domain.com'}, {name: 'myCookie', value: 'myValue2', domain: 'domain.com'}]

withAttributes的正确用法 #

withAttributes的作用是预设Cookie的默认属性，简化重复设置相同属性的操作，不能解决同名不同域Cookie的获取问题，示例如下：

// 创建预设domain为`.domain.com`的Cookie实例
const SubdomainCookie = Cookies.withAttributes({ domain: '.domain.com' });

// 无需重复指定domain，自动应用预设
SubdomainCookie.set('myCookie', 'myValue1');

// 获取时仍遵循js-cookie原有逻辑，若存在同名不同域Cookie仍会被覆盖
console.log(SubdomainCookie.get('myCookie')); // 仅返回最后解析到的那个值

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