JavaScript getCookie函数去除前导空格代码作用解析

分号分割后元素开头带空格的原因 #

document.cookie返回的是当前站点所有可访问cookie拼接成的字符串，按照HTTP Cookie的标准格式约定：不同cookie键值对之间固定使用; （分号+半角空格）作为分隔符，而非单独的分号。
举个实际返回值的例子：

username=test; token=abc123; theme=dark

当你直接用';'作为分隔符调用split()时，除了第一个cookie项，后续所有项的第一个字符都会是分隔用的那个半角空格，这就是ca数组元素开头带空格的根本原因。

c.substring(1)相关代码段的作用 #

你存疑的这段代码是典型的前置空格清理逻辑：

while (c.charAt(0) == ' ') {
  c = c.substring(1);
}

它的执行逻辑非常直接：

• 逐次检查当前单条cookie字符串的首字符是否为空格
• 如果首字符是空格，就调用c.substring(1)截取从第二个字符开始到末尾的内容，相当于删掉最开头的那个空格，再把处理后的字符串重新赋值给c
• 循环执行直到字符串开头没有空格为止，兼容极端场景下可能出现的多个连续前置空格（虽然不符合格式规范，但做了容错处理）

如果省略这段处理，后续判断c.indexOf(name) == 0（检查当前项是不是目标cookie）就会失效：比如你要找username=前缀，但当前字符串是 username=test（开头带空格），前缀匹配会直接失败，明明存在的cookie也会被判定为不存在，返回空字符串。

注：w3schools给出的这个写法是为了兼容更早的JavaScript运行环境——现代JS里可以直接用c.trim()一次性去掉首尾空格，不需要写循环逐字符截取，但trim()是ES5版本才加入的标准方法，在早年IE6/7等老浏览器里不支持，所以才会用这种兼容性更好的实现。

附完整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=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let ca = document.cookie.split(';');
  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) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}

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