获取指定Cookie构建键值对后批量设置的代码问题排查

需求说明 #

• 从指定Cookie名称列表["Cookie1","Cookie2","Cookie3"]中获取对应Cookie的键值对并存储
• 在其他场景批量设置这些Cookie

现有代码 #

// 获取Cookie并构建键值对的代码
var cookiesNames= ["Cookie1","Cookie2", "Cookie3"];

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  let cvalue= [];
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
        cvalue = [c.substring(name.length, c.length)];
 // 尝试创建键值对列表
       cookiesList +=[cname:c.value];
    }
  }
}

// 遍历Cookie名称列表获取Cookie
for (var key in cookiesNames) {
 getCookie(cname);
}
// 导出cookiesList至测试平台Testim
exportsTest.cookiesList;

// 批量设置Cookie的代码
function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// 遍历cookiesList设置Cookie
for (var key in cookiesList) {
 setCookie(key,cookiesList[key],120);
}

问题 #

当前代码无法正常实现需求，请问缺失了哪些部分？

代码缺失与错误点 #

• 未初始化存储Cookie的容器：代码直接使用cookiesList存储键值对，但既没提前声明这个变量，也没把它初始化为对象（键值对用对象存储更合理），应该在代码开头添加let cookiesList = {};。
• 键值对赋值语法错误：cookiesList +=[cname:c.value];是完全无效的JS语法，而且c.value根本不存在。正确的写法应该是cookiesList[cname] = cvalue[0];（或者先把cvalue改成字符串类型，直接写cookiesList[cname] = cvalue;）。
• 遍历Cookie列表时传参错误：for (var key in cookiesNames)循环里，调用getCookie(cname)时，cname是未定义的变量，应该传入数组里的对应元素，也就是getCookie(cookiesNames[key])。
• cvalue变量定义不合理：把cvalue声明成数组，但实际提取的是单个Cookie值，完全没必要用数组，改成let cvalue = "";，赋值时直接cvalue = c.substring(name.length, c.length);更简洁。
• 导出cookiesList的写法错误：exportsTest.cookiesList;只是访问属性，没有赋值操作，正确的应该是exportsTest.cookiesList = cookiesList;（前提是exportsTest是测试平台提供的合法对象）。
• 未处理Cookie不存在的情况：如果某个指定名称的Cookie不存在，当前代码不会做任何处理，但最好在函数里判断一下，避免往cookiesList里塞无效值。
• 遍历cookiesList的方式有隐患：用for...in遍历对象时，可能会遍历到原型链上的额外属性，建议换成Object.entries(cookiesList).forEach(([key, value]) => setCookie(key, value, 120))，这样更安全。

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