Cookie知识总结（-）

学习了Cookie以后，对登陆注册功能的实现，又有了全新的认识。

首先，咱们先了解一下Cookie的基础知识，这些都是很重要的点（这里主要参考阮一峰老师的博客）。

Cookie的基本概念

1. Cookie是服务器保存在浏览器的一小段文本信息，<!注意，这里是服务器保存在浏览器中的>
2. 每一个Cookie的大小通常不超过4KB
3. 浏览器每次向服务器发起请求，就会自动附上这段信息 
    <注意 自动两个字，是自动，这个功能是浏览器本身完成的，
    因此咱们写Js的时候不用管怎么拿到Cookie怎么传给服务器，浏览器会帮咱们完成的
复制代码

Cookie的经常使用场景

Cookie主要用来分辨两个请求是否来自同一个浏览器，以及用来保存一些状态信息，经常使用场合：

1. 对话（session）管理: 保存登陆，购物车等须要记录的信息。
2. 个性化： 保存用户的偏好，如网页的背景色，字体大小等。
3. 追踪： 记录和分析用户行为

复制代码

不少人用Cookie做客户端的存储，虽然可行，可是并不推荐这种作法。

由于Cookie的设计初衷并非整个，且容量很小，只有4KB,
缺少数据操做接口，
并且会影响性能
（每次请求都要发送给服务器端，很占用流浪，
  假如你有一个3kb的Cookie,发送了10次请求，那么总计就会有30kb的数据在网络上传输）
复制代码

客户端存储推荐用 Web storage API 和 IndexedDB。

Cookie的基本信息

1.名字
2. 值（真正的数据写在这里）
3. 到期时间
4. 所属域名（默认是当前域名）
5. 生效的路径 (默认是当前网址)
复制代码

举例来讲：
当咱们访问 www.example.com 时，服务器就会在浏览器写入一个 Cookie了
那个这个Cookie包含了什么呢？
1. cookie的名字和值
2. www.example.com这个域名
3. 根路径 '/',根路径为'/'意味着这个 Cookie对该域名的根路径和它的全部子路径都有效
...(可能还有到期时间等其余信息)

注意：若是路径设为/forums，
那么这个 Cookie 只有在访问www.example.com/forums及其子路径时才有效
复制代码

查看浏览器是否打开 Cookie 功能
window.navigator.cookieEnabled // true

获取当前网页的Cookie
document.cookie
复制代码

Cookie大小和数量的限制

每一个浏览器对Cookie的大小和数量的限制不同，
可是通常来讲，单个域名（注意这里是单个域名）设置的Cookie不该超过30个，
且每一个Cookie的大小不该超过4kb，超过之后，Cookie将会被忽略，不会被设置
复制代码

共享Cookie

浏览器的同源政策规定，两个网址，只要域名相同，端口相同，就能够共享Cookie
注意，这里不须要协议相同
也就是说，http://example.com设置的 Cookie，能够被https://example.com读取
复制代码

Cookie与HTTP协议

1.Cookie的生成

服务器是如何将Cookie写入到浏览器的呢？
服务器只要在回应的头信息中，放置一个 Set-cookie字段就能够了。
Set-cookie: foo = bar;
也能够设置多个Set-cookie，下面是一个回应例子：
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry;Expires=<date>;Domain=<domain-value>;Path=<path-value>;Secure;HttpOnly

[page content]

若是想要更改以前设置的一个Cookie，那么就必须同时知足四个条件
（注意这里是四个条件）：Cookie 的key、domain、path和secure都匹配。
只要有一个属性不一样，就会从新生成一个新的Cookie
复制代码

Cookie例子：
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
复制代码

2.Cookie的发送

浏览器向服务器发送 HTTP 请求时，每一个请求都会带上相应的 Cookie。
也就是说，把服务器早前保存在浏览器的这段信息，再发回服务器。
这时要使用 HTTP 头信息的Cookie字段。

一个请求的例子：
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
复制代码

Cookie的属性

1. Expires :具体到期时间，UTC格式，默认为null，若不设置，则浏览器关闭该Cookie就会被删除

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
复制代码

2. Max-Age属性指定从如今开始 Cookie 存在的秒数，好比60 * 60 * 24 * 365（即一年）。过了这个时间之后，浏览器就再也不保留这个 Cookie。
3. 若是同时指定了Expires和Max-Age，那么Max-Age的值将优先生效。
4. Domain

Domain设置域名，就是浏览器发出Http请求时，那些域名要带上这个Cookie
若没有设置，则默认为当前URL的一级域名
如：
www.example.com会设为example.com，并且之后若是访问example.com的任何子域名
HTTP 请求也会带上这个 Cookie
若是Set-Cookie字段指定的域名，不属于当前的域名，那么浏览器就会拒绝这个Cookie
复制代码

5. Path

Path指定浏览器发出http请求以后，哪些路径要带上这个Cookie
好比，PATH属性是/，那么请求/docs路径也会包含该 Cookie。固然，前提是域名必须一致。
复制代码

6. Secure

Secure属性指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器。
另外一方面，若是当前协议是 HTTP，浏览器会自动忽略服务器发来的Secure属性。
该属性只是一个开关，不须要指定值。若是通讯是 HTTPS 协议，该开关自动打开。
复制代码

7. HttpOnly

HttpOnly属性指定该 Cookie 没法经过 JavaScript 脚本拿到，
主要是Document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。
这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP 请求时，
才会带上该 Cookie。
复制代码