特点：

  • 服务器端可以设置请求头来控制浏览器的cookie值
  • 写入操作只会修改其中提到的 cookie。
  • name/value 必须被编码。
  • 一个 cookie 最大为 4KB，每个网站最多有 20+ 个左右的 cookie（具体取决于浏览器）。
  • 每次请求都会携带cookie请求头到服务器中

 

Cookie 选项：

  • path=/，默认为当前路径，使 cookie 仅在该路径下可见。
  • domain=site.com，默认 cookie 仅在当前域下可见，如果显式设置了域，可以使 cookie 在子域下也可见。
  • expires 或 max-age 设置 cookie 过期时间，如果没有设置，则当浏览器关闭时 cookie 就失效了。
  • secure 使 cookie 仅在 HTTPS 下有效。
  • samesite，如果请求来自外部网站，禁止浏览器发送 cookie，这有助于防止 XSRF 攻击。
  • httponly, 只能服务器使用 Set-Cookie设置，这个选项禁止任何 JavaScript 访问 cookie

 

一组方便操作cookie的函数。

​​getCookie(name)​​ 函数返回具有给定 ​​name​​ 的 cookie：



// 返回具有给定 name 的 cookie，
// 如果没找到，则返回 undefined
function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}


 

​​setCookie(name, value, options)​​

将 cookie ​​name​​ 设置为具有默认值 ​​path=/​​（可以修改以添加其他默认值）和给定值 ​​value​​：



function setCookie(name, value, options = {}) {

  options = {
    path: '/',
    // 如果需要，可以在这里添加其他默认值
    ...options
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  for (let optionKey in options) {
    updatedCookie += "; " + optionKey;
    let optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += "=" + optionValue;
    }
  }

  document.cookie = updatedCookie;
}

// 使用范例：
setCookie('user', 'John', {secure: true, 'max-age': 3600});


 

​​deleteCookie(name)​​

要删除一个 cookie，我们可以给它设置一个负的过期时间来调用它：



function deleteCookie(name) {
  setCookie(name, "", {
    'max-age': -1
  })
}