前言
本次主要围绕以下四个问题进行总结？
1.什么是cookie？
2.cookie的作用？
3.cookie的特点？
4.cookie的工作机制(运行流程)？
5.如何使用cookie？增删改查？
1.什么是cookie？
是一个在浏览器端的存储空间
2.cookie的作用？
HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份。Cookie实际上是一小段的文本信息（key-value）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。
举例: 我们去银行办理储蓄业务，第一次给你办了张银行卡，里面存放了身份证、密码、手机等个人信息。当你下次再来这个银行时，银行机器能识别你的卡，从而能够直接办理业务。
3.cookie的特点？
1.按照域名存储
哪一个域名下存储的数据，就只能在哪一个域名下读取
2.存储大小的限制
官方：4KB左右大约50条（key=value）
私人：150条左右
3.存储的数据类型
只能存储字符串类型
4.cookie空间内部的数据会被自动携带到服务器
只要cookie空间有数据，你发送的任何一个请求，都会携带cookie里面所有的数据
5.cookie的时效性
默认时效是会话级别的，关闭浏览器会自动删除cookie里面所有的数据
6.cookie的操作
前端JS可以操作cookie
任何一个后端语言都可以操作cookie
4.cookie的工作机制(运行流程)
当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：
第一步：客户端发送一个请求给服务端
第二步：服务端返回一个Httpresponse响应给客户端，并且其中包含set-cookie的头部
第三步：客户端保存了cookie，之后再向服务器发送httprequest请求时，会包含一个cookie的头部
第四步：服务端返回数据给客户端
5.如何使用cookie？
1.前端存储语法
基本存储语法：document.cookie=“key=value”；
特点:
@一次只能设置一条
@设置的cookie是由路径限制
上级目录设置的cookie,下级目录可以获取
下级目录设置的cookie，上级目录不可以获取
@默认设置的都是会话级别的时效性
设置一个带有时效性的cookie
在本条cookie设置的时候，在后面添加一个修饰的内容
语法:docuemt.cookie=“a=100;expires=”+时间对象
设置cookie过期时间的时候的时间节点问题
１.我们是在使用js的方式设置cookie
2.js拿到的时间是终端时间，将一个时间对象设置给cookie的时候，不管设置什么时间cookie都会当做世界标准时间使用
问题：
假如拿到一个时间是１４：30：00
这个14:30：30是中国标准时间
当你将这个事件设置给cookie的时候，cookie会将它作为世界标准时间来使用
解决：
我们可以将设置给cookie的时间向前调整8个小时
const time = new Date();
time.setTime(time.getTime()-1000*60*60*8);
document.cookie='a=100;expirse='+time;
//现在设置的时间就是中国的时间，如果你想设置cookie的时效性，
//那就在这个基础上增加你要设置多长的时间
2.前端获取cookie
语法：document.cookie
拿到cookie空间中的所有内容
格式：key1=value1；key2=value2；key3=value3
注意：是把完整的cookie全部拿出来
我们需要自己解析cookie
问题1：我们把cookie字符串转换成什么样子的数据类型最好（方便将来的查询）
对象：{key1：value，key2：value}
问题2：如何转换
1.把字符串切开，split（“； ”）
2.循环遍历
3.再一次将每一项切开
4.把每一项切割好的。【0】当做对象的key，【1】当做对象的value
let s = document.cookie;
let s1 = s.split("; ");
var obj = {
}
var res;
for(let i = 0; i < s1.length; i++){
res = s1[i].split("=");
obj[res[0]] = res[1];
}
console.log(obj);
3.cookie操作的封装
//cookie设置的封装
function setCookie(key,value,expires){
if(expires === undefined){
document.cookie = key+"="+value;
return;
}
const d = new Date();
d.setTime(d.getTime()-1000*60*60*8+1000*expires);
document.cookie = key + "=" + value +";"+"expires="+d;
}
//cookie获取的封装
function getCookie(key){
var obj = {
}；
var s = document.cookie.split('; ');
for(var i = 0; i < s.length; i++){
const s1 = s[i].split("=");
obj[s1][0]=s1[1];
}
//根据传入的key的值来判断返回值是什么？
if(key === undefined){
//如果key什么都没有传，那么表示获取全部
return obj;
}else{
//如果传了，表示获取某一条具体的cookie的值
return obj[key];
}
}
//封装删除cookie
function delCookie（key）{
//将时效性改为运行前一秒
setCookie（key+‘ ’，-1）
}
4.后端操作cookie
语法：setcookie（key，value，expires）
expires：使用秒
后端获取时间：time（）
setcookie("name","jcm",time()+10);
后端获取语法:
$COOKIE[key];
好了，这就是本次分享的主要内容了。谢谢