浅谈cookies

之前在项目中遇到这个问题，但不太会。最近各种笔试，这个问题出现的频率太高了，几乎每张试卷上都有，就花点时间总结了一下。采用老办法，先在xmind上梳理，然后模仿写了个小demo,现在大概知识点整理如下吧。

1.为什么使用cookies?

因为HTTP协议是无状态的，对于一个浏览器发出的多次请求，WEB服务器无法区分 是不是来源于同一个浏览器。所以，需要额外的数据用于维护会话。 Cookie 正是这样的一段随HTTP请求一起被传递的额外数据。

2.cookies是什么？

cookie 就是浏览器储存在用户电脑上的一小段文本文件。cookie 是纯文本格式，不包含任何可执行的代码。

2.cookies的存储大小是多少？

每个Cookie的大小一般不能超过4KB，超过这个长度的Cookie，将被忽略，不会被设置。

3.cookies保存哪些方面的信息？

Cookie的名字
Cookie的值
到期时间
所属域名（默认是当前域名）
生效的路径（默认是当前网址）

4.cookies的分类？

Cookies保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。内存Cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，其存在时间是短暂的。硬盘Cookie保存在硬盘里，有一个过期时间，若要删除cookies用户手工清理的方式或到了过期时间，否则硬盘Cookie不会被删除，其存在时间是长期的。所以，按存在时间，可分为非持久Cookie和持久Cookie。

５.cookies的数据如何移动？

(1)如果你在你的浏览器中输入了web的URL，浏览器会象这个URL的web站点发送请求，比如，你在浏览器中输入一下URL：http: //www.aaa.com，浏览器会将请求发送到aaa的web服务器，请求它的首页。
(2)当浏览器发送请求时，它会查看你机器上跟域名www.aaa.com有关的Cookie文件，如果存在同www.aaa.com有关的 Cookie，浏览器就会把相关的Cookie“键－值”对数据跟请求一起发送到服务器，如果不存在同www.aaa.com有关的 Cookie，则浏览器不发送Cookie到服务器。
(3)aaa的web服务器收到Cookies数据和一个页面的Http请求，如果收到了Cookie“键－值”对，aaa的web服务器将能够使用它们。
(4)如果没有收到Cookie“键－值”对，aaa的web服务器就能知道你以前没有访问过这个站点，服务器建立一个新的用户ID，并在把你所请求的 页面发回到你的浏览器时，把用户ID“键－值”对发送到你的机器，你的硬盘就会驻留了对应这个站点的“键－值”对Cookie。
(5)web服务器可以在你访问站点时，随时的更改“键－值”对或者加入一个新的“键－值”对。
(6)同“键－值”对发送到客户端的还有同这个“键－值”对相关的一些其它信息，其中之一就是Cookie有效期，另一个就是路径（为了在同一个站点的不通部分关联不同的Cookie）。

6.cookies的属性？(参考阮一峰老师的说明)

(1)value属性

value属性是必需的，它是一个键值对，用于指定Cookie的值。

(2)expires属性

expires属性用于指定Cookie过期时间。它的格式采用Date.toUTCString()的格式。
如果不设置该属性，或者设为null，Cookie只在当前会话（session）有效，浏览器窗口一旦关闭，当前Session结束，该Cookie就会被删除。
浏览器根据本地时间，决定Cookie是否过期，由于本地时间是不精确的，所以没有办法保证Cookie一定会在服务器指定的时间过期。

(3)domain属性

domain属性指定Cookie所在的域名，比如example.com或.example.com（这种写法将对所有子域名生效）、subdomain.example.com。
如果未指定，默认为设定该Cookie的域名。所指定的域名必须是当前发送Cookie的域名的一部分，比如当前访问的域名是example.com，就不能将其设为google.com。只有访问的域名匹配domain属性，Cookie才会发送到服务器。

(4)path属性

path属性用来指定路径，必须是绝对路径（比如/、/mydir），如果未指定，默认为请求该Cookie的网页路径。
只有path属性匹配向服务器发送的路径，Cookie才会发送。这里的匹配不是绝对匹配，而是从根路径开始，只要path属性匹配发送路径的一部分，就可以发送。比如，path属性等于/blog，则发送路径是/blog或者/blogroll，Cookie都会发送。path属性生效的前提是domain属性匹配。

(5)secure

secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器。
该属性只是一个开关，不需要指定值。如果通信是HTTPS协议，该开关自动打开。

(6)max-age

max-age属性用来指定Cookie有效期，比如60 * 60 * 24 * 365
（即一年31536e3秒）

(7)HttpOnly

HttpOnly属性用于设置该Cookie不能被JavaScript读取.
（即document.cookie不会返回这个Cookie的值），只用于向服务器发送。

Set-Cookie: key=value; HttpOnly

上面的这个Cookie将无法用JavaScript获取。进行AJAX操作时，XMLHttpRequest对象也无法包括这个Cookie。这主要是为了防止XSS攻击盗取Cookie。

6.如何使用cookies?

(1)JavaScript 写Cookie

用document.cookie设置Cookie，document.cookie属性返回当前网页的Cookie

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

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

注：

Cookie的值必须写成key=value的形式，等号两边不能有空格。另外，写入Cookie的时候，必须对分号、逗号和空格进行转义（它们都不允许作为Cookie的值），这可以用encodeURIComponent方法达到。
但是，document.cookie一次只能写入一个Cookie，而且写入并不是覆盖，而是添加

document.cookie = 'name1=aaa';
document.cookie = 'name2=bbb';
//相当于等于name1=aaa;name2=bbb

document.cookie属性读写行为的差异（一次可以读出全部Cookie，但是只能写入一个Cookie），与服务器与浏览器之间的Cookie通信格式有关。浏览器向服务器发送Cookie的时候，是一行将所有Cookie全部发送。

GET /sample_page.html 
HTTP/1.1Host: www.example.org
Cookie:cookie_name1=cookie_value1;cookie_name2=cookie_value2
Accept: */*

Set-Cookie字段是服务器写入浏览器的Cookie，一行一个

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: cookie_name1=cookie_value1 
Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT

(2)读cookies

var x = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

(3)修改cookies

如果原始的Cookie是用Set-Cookie设置的，改变上面这个cookie的值，就必须使用同样的Set-Cookie；
只要有一个属性不同，就会生成一个全新的Cookie，而不是替换掉原来那个Cookie
如：

Set-Cookie: key1=aaa; domain=example.com; path=/blog

修改为：

Set-Cookie: key1=bbb; domain=example.com; path=/blog

(4)删除cookies

删除一个Cookie的简便方法，就是设置expires属性等于0，或者等于一个过去的日期。

document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT';

注：

上面代码中，名为fontSize的Cookie的值为空，过期时间设为1970年1月1月零点，就等同于删除了这个Cookie。

7.Cookie的限制

(1)cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
(2)由于在HTTP请求中的cookie是明文传递的，所以安全性成问题。（除非用HTTPS)
(3)Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。

8.和cookies类似的存储技术？

服务器端：
session
浏览器端：
WebStorage(localStorage、sessionStorage)
userData
indexedDB
关于以上存储技术详细的介绍及它们之间的区别，详见后续文章吧(持续更新中...)
参考资料：
(1)http://javascript.ruanyifeng.com/bom/cookie.html
(2)http://www.jianshu.com/p/8731e8d62b3d
(3)http://www.runoob.com/js/js-cookies.html