写给使用cookie，也会迷茫的你。

说一下Cookie

Cookie是储存在用户本地的数据，一般用于存储用户信息，浏览器在去请求接口时，会自动携带上Cookie（也就算是本地用户信息发送到服务器进行验证）。

Cookie常用属性：设置失效时间，expires属性，时间到期本地会自动清除过期Cookie。

Cookie属性：

简单介绍一下Cookie属性：

属性名	简单介绍
name	Cookie的名称
value	Cookie的值
Domain	Cookie在哪个域是有效的
Path	Cookie的有效路径
Expires/Max-age	Cookie的有效期
Size	Cookie的大小
HttpOnly	是否允许通过脚本document.cookie去更改这个值，默认false容许修改
Secure	Cookie的安全属性，为true时只在安全协议中传输此Cookie。
SameSite	限制第三方 Cookie，分为Strict>Lax>None,None配合Secure使用
Priority	优先级，当cookie数量超出时，低优先级的cookie会被优先清除

Cookie的使用

注意浏览器的document对象,浏览器控制台打印console.dir(document)

所以可使用document.cookie赋值

安全存储cookie

使用

// 5秒就过期了，过期了自动删除
 setCookie("userToken", "AAAAAA", 5 / (24 * 60 * 60) );

函数

function setCookie (cookieNname, cookieValue, expiresDays = 1) {
   // cookies 过期的时间 默认为1天
  var date = new Date();
  date.setTime(date.getTime() + expiresDays * 24 * 60 * 60 * 1000);
  let expires = "expires=" + date.toUTCString();
  document.cookie = cookieNname + "=" + cookieValue + ";" + expires + ";path=/";
}

设计5秒消失,测试自动删除

安全获取cookie中的值

也就是获取cookie中存储的用户信息

function getCookieValue (cookieName) {
  var name = cookieName + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(";"); // ['userToken=AAAAAA']
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      // 剥离出token数据
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

遇到问题

问题一：document.cookie 赋不上值

本地直接通过浏览器浏览的时候，并不能写入cookie。经发现，只有当用在服务器或者本地的服务器中的时候，才能使用这个方法写入cookie

html测试时解决办法：通过VScode的插件live Server 来打开动态服务器

在使用脚手架的时候，可以优先考虑，本地服务器打开，而不是localhost打开。

与服务器传递

在对服务器传递数据内容，请求头等都需要事先与后端商量一下

比如将token放到请求头：Authorization中

let instance = axios.create({
      baseURL: "https://xxxx/",
      timeout: 1000
    })
instance.interceptors.request.use(
  config => {
    config.headers["Authorization"] = getCookieValue("userToken");
    return config;
  }
)