Cookie基础

关于Cookie：

1、Cookie 是什么
Cookie 全称 HTTP Cookie，简称 Cookie
// 是浏览器存储数据的一种方式
// 因为存储在用户本地，而不是存储在服务器上，是本地存储
// 一般会自动随着浏览器每次请求发送到 服务器端
2、Cookie 有什么用
利用 Cookie 跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等
3、在浏览器中操作 Cookie
不要在 Cookie 中保存密码等敏感信息

Cookie 的基本用法：

	 1.写入 Cookie
      // document.cookie = 'username=name';
      // document.cookie = 'age=18';
       不能一起设置，只能一个一个设置
       2.读取 Cookie
      console.log(document.cookie);
      读取的是一个由名值对构成的字符串，每个名值对之间由“; ”（一个分号和一个空格）隔开

Cookie 的属性：

1.Cookie 的名称（Name）和值（Value）
      // 最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值
      // Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码
      // document.cookie = 'username=name';
      // document.cookie = `username=${encodeURIComponent('用户名')}`;
      // document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent( '用户名' )}`;
      // 一般名称使用英文字母，不要用中文，值可以用中文，但是要编码
      
 2.失效（到期）时间
      // 对于失效的 Cookie，会被浏览器清除
      // 如果没有设置失效（到期）时间，这样的 Cookie 称为会话 Cookie
      会话 Cookie: 它存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失
      // document.cookie = 'username=name';

      // 想长时间存在，设置 expires 或 max-age
      // expires 值为 Date 类型
      // document.cookie = `username=name; expires=${new Date( '2023-1-01 00:00:00' )}`;

      // max-age值为数字，表示当前时间 + 多少秒后过期，单位是秒
      // document.cookie = 'username=name; max-age=5';
      // document.cookie = `username=name; max-age=${24 * 3600 }`;
      // 如果 max-age 的值是 0 或负数，则 Cookie 会被删除
      
3.Domain 域
      // Domain 限定了访问 Cookie 的范围（不同域名）
      // 使用 JS 只能读写当前域或父域的 Cookie，无法读写其他域的 Cookie
      // document.cookie = 'username=name; domain=www.xxxxx.com';
      
 4.Path 路径
      // Path 限定了访问 Cookie 的范围（同一个域名下）默认在 / 路径下
      // 使用 JS 只能读写当前路径和上级路径的 Cookie，无法读写下级路径的 Cookie
      // document.cookie = 'username=name; path=/home';内层可以访问外层作用域
      
// 当 Name、Domain、Path 这 3 个字段都相同的时候，才是同一个 Cookie
5.HttpOnly
      // 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问
      
6.Secure 安全标志
      // Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端
      
// Domain、Path、Secure 都要满足条件，还不能过期的 Cookie 才能随着请求发送到服务器端

Cookie 的封装：

// 写入 Cookie
const set = (name, value, { maxAge, domain, path, secure } = {}) => {
  if (typeof maxAge === 'number') { cookieText += `; max-age=${maxAge}`; }
  if (domain) {  cookieText += `; domain=${domain}`; }
  if (path) {  cookieText += `; path=${path}`; }
  if (secure) {  cookieText += `; secure`; }
  document.cookie = cookieText;
}
// 通过 name 获取 cookie 的值
const get = name => {
  name = `${encodeURIComponent(name)}`;
  const cookies = document.cookie.split('; ');//分割成数组然后遍历
  for (const item of cookies) {
    const [cookieName, cookieValue] = item.split('=');
    if (cookieName === name) {  return decodeURIComponent(cookieValue);  }
  }
  return;
};
// 根据 name、domain 和 path 删除 Cookie
const remove = (name, { domain, path } = {}) => {
  set(name, '', { domain, path, maxAge: -1 });
};

Cookie 的注意事项：

// 1.前后端都可以创建 Cookie
// 2.Cookie 有数量限制
// 每个域名下的 Cookie 数量有限
// 当超过单个域名限制之后，再设置 Cookie，浏览器就会清除以前设置的 Cookie
// 3.Cookie 有大小限制
// 每个 Cookie 的存储容量很小，最多只有 4KB 左右