实用主义：前端cookie介绍及操作封装

前言

前端开发中，少不了对cookie进行操作，那么cookie究竟是什么东西呢？

Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于 RFC2109 和 2965 中的都已废弃，最新取代的规范是 RFC6265[1] 。（可以叫做浏览器缓存） ——百度百科

说白了cookie就是用来存储数据的，并且cookie可以通过HTTP请求进行同域传播（CORS跨域请求默认是不带的）。由于HTTP是无状态协议，cookie也同时用作验证用户信息的凭证。 在WEB的蛮荒纪元中，没有localstorage、sessionstorage，因此cookie常常携带了许多额外的信息，但是浏览器对于每个域的cookie是有数量限制的。直到HTML5的出现，cookie才真正行使的是自己真正的职责——验证。

浏览器中的cookie

document.cookie

浏览器window并没有封装对于cookie的操作，只有唯一的一个document.cookie可以查看（不能查看http-only属性的cookie） 通过document.cookie我们可以看到cookie

"bdshare_firstime=1479130453985; CNZZDATA5578006=cnzz_eid%3D146565046-1476099110-null%26ntime%3D1488271921; Hm_lvt_8e2a116daf0104a78d601f40a45c75b4=1487416700,1487860599,1488207009,1488277146; Hm_lpvt_8e2a116daf0104a78d601f40a45c75b4=1488277146"

这是从runnoob上抓到的cookie。 我们可以看到通过document.cookie得到的是一个字符串，cookie以name=value;的形式进行划分

cookie的属性

这仅仅是包含cookies的字符串，但是cookie还有许多额外的属性，我们可以通过开发者工具台看到

cookie属性

1. Name：cookie的名字
2. Value：cookie的值
3. Domain：cookie所在的域
4. Path：所在的路径
5. Expires/Max-age：cookie的有效期，默认为0，只在session期有效
6. Size：cookie的大小
7. HTTP：http-only属性，是否只读，默认false
8. Secure：是否只在https协议中传输，默认false 这里就不展开细致讲解属性了，具体请百度

前端封装cookie操作

浏览器只提供了doucment.cookie属性，如果需要操作，我们需要手动封装操作方法

添加cookie 值为中文需要转码 重复名称会覆盖

function setCookie(name, val, day) {
  let expireDate = new Date();
  expireDate.setDate(expireDate.getDate() + day);
  document.cookie = `${name}=${val};expires=${expireDate.toGMTString()}`;
}

通常我们只需要名称、值和生命期，更多的属性设置修改按照prop=val;的形式修改最后一条代码即可。

读取cookie 返回一个包含cookie键值对的数组

function getCookies() {
  let cookies = [];
  if(document.cookie) {
    let cookieArr = document.cookie.split(';');
    for (let i = 0;i<cookieArr.length;i++) {
      let keyArr = cookieArr[i].split("=");
      let name = keyArr[0];
      let val = keyArr[1];
      cookies.push({name: val});
    }
  } else {
    return false;
  }
  return cookies;
}

删除cookie 把失效日期设置为过期

function removeCookie(name) {
  let cookies = getCookies();
  if (cookies) {
    for(let cookie of cookies) {
     if(cookie.name === name) {
        setCookie(name, null, -99);
        break;
      }
    }
  } else {
    return false;
  }
}

封装为一个单例

通常我们不会允许这些方法称为全局对象，因此需要封装为一个单例CookieManager

let CookieManager = {
  setCookie,
  getCookies,
  removeCookie
};

最后

这是前端操作cookie的方法，后端因为语言众多，因此有各自的方法，通常是设置响应头。 就是这样：）