cookie，document.cookie

时间：2021-08-25 18:22:16 收藏：0 阅读：35

特点：

服务器端可以设置请求头来控制浏览器的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
  })
}

参考链接：

https://zh.javascript.info/cookie

原文：https://www.cnblogs.com/artian/p/15185170.html