前端存储-cookie

一、cookie是什么

HTTP协议本身是无状态的，即服务器无法判断用户身份。Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

cookie机制

当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：

客户端发送一个请求到服务器 ==> 服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 ==> 客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 ==> 服务器返回响应数据

cookie属性项

属性项	属性项介绍
NAME=VALUE	键值对，可以设置要保存的 Key/Value，注意这里的 NAME 不能和其他属性项的名字一样
Expires	过期时间，在设置的某个时间点后该 Cookie 就会失效
Domain	生成该 Cookie 的域名，如 domain=“www.baidu.com”
Path	该 Cookie 是在当前的哪个路径下生成的，如 path=/wp-admin/
Secure	如果设置了这个属性，那么只会在 SSH 连接时才会回传该 Cookie

Expires

该属性用来设置Cookie的有效期。Cookie中的maxAge用来表示该属性，单位为秒。Cookie中通过getMaxAge()和setMaxAge(int maxAge)来读写该属性。maxAge有3种值，分别为正数，负数和0。

如果maxAge属性为正数，则表示该Cookie会在maxAge秒之后自动失效。浏览器会将maxAge为正数的Cookie持久化，即写到对应的Cookie文件中（每个浏览器存储的位置不一致）。无论客户关闭了浏览器还是电脑，只要还在maxAge秒之前，登录网站时该Cookie仍然有效。
当maxAge属性为负数，则表示该Cookie只是一个临时Cookie，不会被持久化，仅在本浏览器窗口或者本窗口打开的子窗口中有效，关闭浏览器后该Cookie立即失效。

Cookie的域名

Cookie是不可以跨域名的，隐私安全机制禁止网站非法获取其他网站的Cookie。

正常情况下，同一个一级域名下的两个二级域名也不能交互使用Cookie，比如test1.mcrwayfun.com和test2.mcrwayfun.com，因为二者的域名不完全相同。如果想要mcrwayfun.com名下的二级域名都可以使用该Cookie，需要设置Cookie的domain参数为.mcrwayfun.com，这样使用test1.mcrwayfun.com和test2.mcrwayfun.com就能访问同一个cookie

Cookie的路径

path属性决定允许访问Cookie的路径。比如，设置为"/"表示允许所有路径都可以使用Cookie

Cookie的前端设置、获取与删除

let cookie = {
    /**
     * 设置cookie方法
     * @param key{string} cookie名称
     * @param val{string} cookie值
     * @param hours{number} 过期时间（小时）
     */
    set: function (key, val, hours) {
      let date = new Date(); //获取当前时间
      let expiresHours = parseInt(hours);  //将date设置为n小时以后的时间
      date.setTime(date.getTime() + expiresHours * 24 * 3600 * 1000); //格式化为cookie识别的时间
      document.cookie = key + "=" + val + ";expires=" + date.toGMTString();  //设置cookie
    },
    /**
     * 移除cookie方法
     * @param key{string} cookie名称
     */
    remove: function (key) {
      this.set(key, "", 0)
    },
    /**
     * 获取cookie方法
     * @param key{string} cookie名称
     * @returns {string} 对应名称的cookie值
     */
    get: function (key) {//获取cookie方法
      /*获取cookie参数*/
      let getCookie = document.cookie.replace(/[ ]/g, "");  //获取cookie，并且将获得的cookie格式化，去掉空格字符
      let arrCookie = getCookie.split(";")  //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
      let tips = "";  //声明变量tips
      for (let i = 0; i < arrCookie.length; i++) {   //使用for循环查找cookie中的tips变量
        let arr = arrCookie[i].split("=");   //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
        if (key === arr[0]) {  //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
          tips = arr[1];   //将cookie的值赋给变量tips
          break;   //终止for循环遍历
        }
      }
      return tips;
    }
  }