   // 1.Cookie 是什么
      // Cookie 全称 HTTP Cookie，简称 Cookie
      // 是浏览器存储数据的一种方式
      // 因为存储在用户本地，而不是存储在服务器上，是本地存储
      // 一般会自动随着浏览器每次请求发送到服务器端

      // 2.Cookie 有什么用
      // 利用 Cookie 跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网   页的停留时间等

      // 3.在浏览器中操作 Cookie
      // 不要在 Cookie 中保存密码等敏感信息
       // 1.前后端都可以创建 Cookie

      // 2.Cookie 有数量限制
      // 每个域名下的 Cookie 数量有限

      // 当超过单个域名限制之后，再设置 Cookie，浏览器就会清除以前设置的 Cookie

      // 3.Cookie 有大小限制
      // 每个 Cookie 的存储容量很小，最多只有 4KB 左右

   // 1.写入 Cookie
      // document.cookie = 'username=zs';
      // document.cookie = 'age=18';

      // 不能一起设置，只能一个一个设置
      // document.cookie = 'username=zs; age=18';

      // 2.读取 Cookie
      console.log(document.cookie);

      // 读取的是一个由名值对构成的字符串，每个名值对之间由“; ”（一个分号和一个空格）隔开
      // username=zs; age=18

    // 1.Cookie 的名称（Name）和值（Value）
      // 最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值

      // Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码
      // document.cookie = 'username=alex';

      // document.cookie = `username=${encodeURIComponent('张三')}`;
      // document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent(
      //   '张三'
      // )}`;

      // 一般名称使用英文字母，不要用中文，值可以用中文，但是要编码

      // 2.失效（到期）时间
      // 对于失效的 Cookie，会被浏览器清除
      // 如果没有设置失效（到期）时间，这样的 Cookie 称为会话 Cookie
      // 它存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失

      // document.cookie = 'username=alex';

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

      // max-age
      // 值为数字，表示当前时间 + 多少秒后过期，单位是秒
      // document.cookie = 'username=alex; max-age=5';
      // document.cookie = `username=alex; max-age=${24 * 3600 * 30}`;

      // 如果 max-age 的值是 0 或负数，则 Cookie 会被删除
      // document.cookie = 'username=alex';
      // document.cookie = 'username=alex; max-age=0';
      // document.cookie = 'username=alex; max-age=-1';

      // 3.Domain 域
      // Domain 限定了访问 Cookie 的范围（不同域名）

      // 使用 JS 只能读写当前域或父域的 Cookie，无法读写其他域的 Cookie
      // document.cookie = 'username=alex; domain=www.xxx.com';

      // www.xxx.com m.xxx.com 当前域
      // 父域：.xxx.com

      // 4.Path 路径
      // Path 限定了访问 Cookie 的范围（同一个域名下）

      // 使用 JS 只能读写当前路径和上级路径的 Cookie，无法读写下级路径的 Cookie
      // document.cookie = 'username=alex; path=/course/list';
      // document.cookie = 'username=alex; path=/1.Cookie/';

      // 当 Name、Domain、Path 这 3 个字段都相同的时候，才是同一个 Cookie

      // 5.HttpOnly
      // 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问

      // 6.Secure 安全标志
      // Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端

      // Domain、Path、Secure 都要满足条件，还不能过期的 Cookie 才能随着请求发送到服务器端

 // import { set, get, remove } from './cookie.js';
      // import { set, get, remove } from './cookie.js';
      // set('username', 'alex');
      // set('username', 'zs');
      // set('age', 18);
      // set('用户名', '张三');

      // set('sex', 'male', {
      //   maxAge: 30 * 24 * 3600
      // });

      // remove('username');
      // remove('用户名');

      // console.log(get('username'));
      // console.log(get('age'));
      // console.log(get('用户名'));
      // console.log(get('sex'));

      // 使用封装好的 Cookie 实现网站语言切换
      import { set } from './cookie.js';
      const cnBtn = document.getElementById('cn');
      const enBtn = document.getElementById('en');

      cnBtn.addEventListener(
        'click',
        () => {
          set('language', 'cn', {
            maxAge: 30 * 24 * 3600
          });
          window.location = './2-6.Cookie 的封装.html';
        },
        false
      );
      enBtn.addEventListener(
        'click',
        () => {
          set('language', 'en', {
            maxAge: 30 * 24 * 3600
          });
          window.location = './2-6.Cookie 的封装.html';
        },
        false
      );

cookie的封装

// 写入 Cookie
const set = (name, value, { maxAge, domain, path, secure } = {}) => {
  let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;

  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;

  // document.cookie='username=alex; max-age=5; domain='
};

// 通过 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;
};

// 'username=alex; age=18; sex=male'
// ["username=alex", "age=18", "sex=male"]
// ["username","alex"]

// get('用户名');

// 根据 name、domain 和 path 删除 Cookie
const remove = (name, { domain, path } = {}) => {
  set(name, '', { domain, path, maxAge: -1 });
};

export { set, get, remove };

前端JS的Cookie

cookie的封装