如何用jQuery获取Cookie值？解析JSON格式Cookie属性返回undefined

核心原因排查 #

你遇到的问题大概率是Cookie字符串未正确解析为JSON对象，或者getCookieName函数没有获取到正确的Cookie值，导致后续属性访问失败。

分步解决方案 #

• 第一步：验证原始Cookie值
  先打印getCookieName('tmm_user_data')的返回结果，确认是否是预期的JSON字符串：

  const rawCookie = getCookieName('tmm_user_data');
  console.log('原始Cookie值:', rawCookie);
  

  如果输出不是{"user_first_name":["Raj Subscriber"],"user_last_name":["Chudasama"]}，说明getCookieName函数有问题，或者Cookie本身不存在/不符合预期。

• 第二步：确保正确解析JSON
  Cookie存储的是字符串，必须用JSON.parse()转换为对象后才能访问属性。完整代码示例：

  const rawCookie = getCookieName('tmm_user_data');
  if (!rawCookie) {
    console.log('未找到tmm_user_data Cookie');
    return;
  }
  
  try {
    const userIsLoggedIn = JSON.parse(rawCookie);
    // 现在可以正常访问数组中的值
    const firstName = userIsLoggedIn.user_first_name[0];
    const lastName = userIsLoggedIn.user_last_name[0];
    console.log('用户姓名:', firstName, lastName);
  } catch (error) {
    console.error('Cookie JSON解析失败:', error);
    // 这里可以检查rawCookie是否有语法错误，比如引号未转义、多余字符等
  }
  

• 第三步：检查getCookieName函数的正确性
  如果原始Cookie值获取错误，建议替换为标准的Cookie读取函数：

  function getCookieName(name) {
    const cookieString = document.cookie;
    const cookies = cookieString.split('; ');
    for (let cookie of cookies) {
      const [cookieName, cookieValue] = cookie.split('=');
      if (cookieName === name) {
        return decodeURIComponent(cookieValue); // 注意解码，避免转义字符问题
      }
    }
    return null;
  }
  

  很多自定义Cookie函数会忽略decodeURIComponent，导致Cookie值中的转义字符（比如空格、引号）未被还原，进而JSON解析失败。

• 第四步：确认Cookie的有效性
  打开浏览器开发者工具（F12），切换到Application > Cookies标签，检查：

  • tmm_user_data是否存在
  • Cookie的值是否为正确的JSON格式
  • Cookie的Domain和Path是否与当前页面匹配（不匹配的话无法读取）

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