Cookie机制详解

Cookie：一种web服务器和web客户端之间通信的机制。

在开始讲解之前，我先讲一下Cookie的产生理由：

Cookie产生的基本原因是因为HTTP是一种无状态的协议。

当一个客户端A请求一台服务器B，服务器B做出响应之后。客户端A和服务器B就互为陌生人了。当客户端A再次访问服务器B的时候，在没有做任何处理的情况下（处理手段如：URL重写，隐藏表单域，cookie，session），服务器B并不知道这个客户端A就是之前已经访问过的客户端。

PS：可能有人要问，为什么HTTP不设计成有状态的，这个的原因很多，你只要知道，现在的事实就是HTTP是一种无状态的协议。

随着时代的发展，如淘宝这样的电商网站如雨后春笋般出现在了网络上，而网站的请求都是经过HTTP请求的，如果在客户端每次请求之后，服务器都无法判断这个客户端是谁，那么想淘宝的会员体系就没法实现了。

所以，为了解决HTTP无状态的问题，人们提出了一种方式：利用Cookie技术。

Cookie机制的基本流程：

1.   客户端K  通过浏览器L  第一次访问  服务器F

2.   服务器F  在HTTP通过set-cookie头部设置了一个标志客户端K的字符串回送到 客户端K

3.   客户端K的浏览器L检测到响应头部有set-cookie这个HTTP头部后，将他的值存储在硬盘中。

4. 第一次请求完毕（在这个过程中，服务器在响应的时候，将一个标志客户端的字符串放在了HTTP头部中，当客户端浏览器收到HTTP报文，并检查其头部的时候，发现有set-cookie字段，于是把他的值存储在了客户端的硬盘中，请注意，在这个过程中，浏览器的作用很重要，是他自动把cookie存储在客户端硬盘的，也就是说，如果你的浏览器不具备，或者已经禁止了保存cookie这个功能，那么cookie这个机制就会失效了）

5. 客户端K再次通过浏览器L访问服务器F（在这个过程中，浏览器L接受到访问服务器F的命令后，它会先去它之前存储Cookie的地方看看有没有已经存储起来的cookie，如果有，那么就会将该cookie值放在HTTP的cookie头部中，作为请求头发送服务器F）

6. 服务器F接受到请求后，程序员编写的程序可以通过语言提供的方法（如：PHP的$_COOKIE）来访问到HTTP头部中的cookie字段值，根据都出来的值，服务器就可以判断该客户端K就是刚刚访问过的，因为cookie值就是在第二步中，服务器发送到客户端的。

7.再次访问结束。再次访问过程中cookie的值已经产生作用了，因为他的存在，服务器知道了客户端就是刚刚已经访问过的客户端。在这个过程中，有两点需要注意：一是浏览器会自己带上cookie发送给服务器，不用做任何其他动作。第二是服务器需要自己进行判断cookie来判断是否是刚刚访问的客户端。

阶段总结：所谓Cookie就是在HTTP头部上放置一些服务器生成的字符串，浏览器会在收到cookie的时候保存，和请求的HTTP的时候会自动带上cookie返回给服务器。在cookie机制中，浏览器是最重要的角色，没有它的自动保存和自动发送，cookie机制就无法起作用。

所以，学习cookie就是学习以下几个方面

1. 了解cookie在HTTP头部中的格式

2. 如何在服务器端读取设置cookie(和相应的后台语言有关，PHP,JAVA,C#)

3. 如何在客户端读取和设置cookie(只有一门JavaScript)

那么，开始真正的学习吧。

1. 了解cookie在HTTP头部中的格式

 cookie在HTTP的请求头中和HTTP响应头中显示的头部字段是不同的，分别如下图：

请求头

响应头

这两张图是我从谷歌浏览器的网络面板截取的，可以看到：

1.在请求头中：

cookie是存放在Cookie字段中的，但是他为什么会自己出现在请求头中呢？我很确定，前端工程师并没有用JavaScript往请求头中加该字段值(因为是我写的)。

其实，该值是由浏览器帮我们加进去的，当我们在浏览器的地址输入栏中输入一个地址，并按下Enter键进行访问的时候，浏览器会自己根据我们输入的域名，跑去一个专门存储着cookie的文件里查找，看看再此次访问之前，有没有cookie是属于该网站，并且还没有过期的，如果找到就把cookie值取出来，并赋值给HTTP请求头的的Cookie字段，如果查到了多个cookie，则会以";"分割开。

在这个过程中，是不需要程序员写任何代码的，这是属于浏览器的工作（前提是浏览器没有被禁止使用Cookie的情况下）。

在请求头中，cookie的格式是很简单的：Cookie：key=value;key=value；

2.在响应头中

Set-Cookie:ECS=grid; expires=Sat, 07-Apr-2018 14:23:13 GMT; Max-Age=604800

当浏览器收到含有Set-Cookie字段的响应头时，他会将该cookie存储在一个cookie文件中，这个cookie文件其实就是硬盘上一个普通文件，而所谓cookie就是该文件中的一行字，是由浏览器进行维护的。

和请求头中字段cookie不同，在响应头中，用set-Cookie来表传递Cookie值，这个值是程序员使用服务器语言设置的，比如PHP的setcookie() 函数

setcookie

其他诸如Java，C#等等，但凡能进行HTTP请求的语言都有相应的方式向HTTP响应头部中设置Cookie，并且，参数和上面的PHP是一样的，总共可以设置六个参数，下面分别讲解一下各个参数的含义：

1.name ：Cookie的名字,也就是Key值，后台语言可以根据这个读取到cookie

2.value  : Cookie的值，这个value和name是一个cookie的必须部分

3.expire :这个属性会指定一个日期字符串，用来说明该cookie的有效期，一旦过了该日期，浏览器在发送请求去cookie文件中查找时，就会忽略掉过期的cookie。日期的格式是定死的：Weekday, DD-Mon-YY HH:MM:SS GMT，日期唯一合法的时区GMT，如果在设置cookie的时候不设置expire字段，那么cookie会在会话结束之后立即过期。

4.domain：域名，标明该cookie是属于哪个域名下的，浏览器在发送请求去cookie文件中查找时，会根据请求的域名来搜索cookie文件，只提取出请求域名和domain的cookie，如domain值为office.com的cookie，在访问www.office.com和api.office.com时，浏览器都会带上该cookie返回给服务器，但是访问www.abc.com时就不会返回该cookie了，如果没有指定该值，则默认为请求头中的主机名。

5.path：提供了一个可以将同一个网站中不同模块的cookie隔离开的方法，比如domain:www.abc.com.而path:/foot/和path:/footer/,当访问www.abc.com/foot/index.html时，浏览器会不将path为/footer/的cookie返回服务器。如果没有设置该值，则默认为响应该HTTP请求的URL路径。

6.Secure：可选，如果在set-cookie中包含了该属性，则只有在HTTPS请求的时候才会带该cookie。

至此，关于cookie的知识基本上就清楚了，最后总结一下关于cookie的开发：

在前端

可以使用

document.cookie="username=John Doe; expires=Thu, 18 Dec 2019 12:00:00 GMT; path=/";设置cookie

使用 document.cookie获取cookie

JavaScript设置和获取cookie

在服务器端

如PHP。

通过$_COOKIE变量可以读取到请求头中的cookie值。

通过setcookie(name, value, expire, path, domain);可以将cookie设置到响应头中，浏览器会自行将cookie保存在客户端本地。

通过setcookie(name, value, expire, path, domain);将已存在的cookie的expire值设置为过去的时间，以让浏览器在客户端删除该cookie