JS--Cookie

前言

之前学的是本地存储，然后了解到还有cookie这种存储方法，经过了解，这种方法对后面的学习有很大作用，希望大家能跟我一起开肝，羌胡！！
补充一点的就是，ccokie的操作分为服务器端和客户端，这里我没有自己的服务器，所以只讲客户端的！！

正题

简介

cookie是由服务器发送给客户端（浏览器）的小量信息。平时上网时都是使用无状态的HTTP协议传输出数据，这意味着客户端与服务端在数据传送完成后就会中断连接。这时我们就需要一个一直保持会话连接的机制。在session出现前，cookie就完全充当了这种角色。也就是说cookie的小量信息能帮助我们跟踪会话。一般该信息记录用户身份，当然cookie也常记录跟踪购物车的商品信息（如数量）、记录用户访问次数等。

处理

服务器向客户端发送cookie
浏览器将cookie保存
之后每次http请求浏览器都会将cookie发送给服务器端

cookie的操作（在js里面操作）

写入

1. 第一种方法是原生赋值方法：
   注意：
   document.cookie=’'赋值时，用;分号间隔，只用于添加属性。
   document.cookie=‘name=1;age=2’ 这种写法只有name=1可以生效。因为一次只能赋值一个name和value，若多个也只取第一个。

document.cookie = "age=1; domain=sankuai.com; path=/";
/*里面age=1是内容，后面跟的是属性，如果要设置多个内容则按下面格式来*/
document.cookie = "name=qwq;"
document.cookie = "address=shantou;"

2. 为了更加方便使用我们就会直接封装成一个函数–setCookie()
   这里如果不给时间的话，浏览器一关就没了

function setCookie (name, val, exday) {
  let d = new Date()
  let expires = ''
  if (exday) {
    d.setTime(d.getTime() + (exday * 24 * 60 * 60 * 1000))
    expires = '; expires=' + d.toGMTString()
  }
  document.cookie = name + '=' + val + expires
}
/*这里面name是键，val是值，exday是存在时间可不填*/

获取

1. 原生获取方法：document.cookie
   注意这个获取是全部

document.cookie="name=wang";
    document.cookie="age=20"
    setCookie('text','123');
    console.log(document.cookie);

2. 同理封装一个获取函数（为了获取特定的值）–geiCookie()

function getCookie (name) {
  let data = '';
  if (document.cookie) {
    let arr = document.cookie.split(';');
    for (let str of arr) {
      let temp = str.split('=');
      if (temp[0].replace(/(^\s*)/g, '') === name) {
        data = unescape(temp[1]);
        break;
      }
    }
  } else {
    console.warn('cookie不存在');
  }
  return data;
}

移除–clearCookie

首先我们知道cookie是可以设置时间的，只要我们其有效期变成当前时间之前就可以达到清除的效果！！

function clearCookie (name) {
  let temp = new Date()
  temp.setTime(temp.getTime() - 1)
  let val = getCookie(name)
  if (val != null) document.cookie = name + '=' + val + ';expires=' + temp.toGMTString()
}

cookie的一些特殊点

1. 如果浏览器使用的是cookie，那么所有的数据都保存在浏览器端，
2. cookie可以被用户禁止
3. cookie不安全(对于敏感数据，需要加密)
4. cookie只能保存少量的数据(大约是4k)
5. cookie只能保存字符串
6. 正因为保存得少，对服务器的负担就没有那么重

与sesson的联系

cookie 可以让服务端程序跟踪每个客户端的访问，但是每次客户端的访问都必须传回这些Cookie，如果 Cookie 很多，这无形地增加了客户端与服务端的数据传输量！！！

而 Session 也就应运而生。同一个客户端每次和服务端交互时，不需要每次都传回所有的 Cookie 值，而是只要传回一个 ID，这个 ID 是客户端第一次访问服务器的时候生成的， 而且每个客户端是唯一的。这样每个客户端就有了一个唯一的 ID，客户端只要传回这个 ID 就行了，这个 ID 通常是 NANE 为JSESIONID 的一个 Cookie。

与sesson的区别

1.具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。同时我们也看到， 由于采用服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制来达到保存标识的目的
2.cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session
3.session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
4.单个cookie保存的数据不能超过4k,很多浏览器都限制一个站点最多保存20个cookie，可以将登陆信息等重要信息存放为session。