总结cookie的一些问题
最近老是和cookie打交道,今天专门来总结下cookie的一些问题。
一、什么是cookie?
Cookie(复数形态Cookies),中文名称为小型文本文件或小甜饼[1],指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。定义于RFC2109。为网景公司的前雇员Lou Montulli在1993年3月所发明。【来自维基百科】
Cookie是保存在客户端中的一小段文本信息,在你浏览网页的时候,浏览器就会将其存储在硬盘上,下次访问同一地址的时候,只要cookie没有失效,浏览器就会将其信息再次发给服务器。所以,cookie伴随着用户请求和页面在web服务器和浏览器之间进行传递。cookie中包含着用户每次访问站点的时服务器端可以读取到的信息。
二、cookie 解决了什么问题?
解决了同一浏览器访问不同网页的时候,信息不能共享的问题。为什么呢?因为http协议是无状态的,对于同一个浏览器发出的多个请求,web服务器是无法区分来源的。cookie解决了这个问题。
三、cookie 是怎么交互的?
是通过http的响应头和请求头使客户端和服务器端进行交互的。
举个例子:以360账号登陆为例,在登陆360用户中心的时候,会向yunpan.cn这个域里面写cookie的。我们打开fiddle来看下服务器是如何写到yunpan.cn这个雨里面的吧。
从上图中可以看出,服务器端的cookie 是通过http响应头来发送给客户端的,每次一个写入动作,都会产生Set-cookie 的响应头,浏览器获取响应头后,来接受cookie的
现在我们去访问yunpan.cn 这个域的时候,我们发现,我们没有输入用户名和密码,直接登陆了。同样,我们用fillder来看看具体的过程
从上图中,我们看到cookie的值是在http的请求头里面,发送给服务器的。
四、cookie的参数以及其含义
参数 | 含义 | 取值 | 备注 |
name=<value>[名称=<值>] | name表示cookie的key | value 表示key的取值 | 存储value的值时候必须转义,一般用encodeURICompoment 进行转义,对key的合法性也必须进行检查 |
[; expires=<date>] | cookie的过期日期, | 以ms为单位,GMT为标准 | 缺省为空,该cookie只能被浏览器的 |
[; domain=<domain>] | 生效的域名 | 域名 | 可以缺省,即为当前网页的域名 |
[; path=<path>] | 生效的路径 | /path | 可以缺省,即为当前网页所在的目录,cookie不能跨Path访问,但是可以访问到父级目录设置的cookie |
[; secure] | 安全性 | true/false | 可以缺省,表示cookie只能在https链接中被浏览器传递到服务器端进行会话验证,http是不会传递该信息的 |
五、cookie 在不同浏览器中的差异
浏览器的类别 | 单域名cookie的数量上限 | 单个cookie的容量上限 | cookie的总上限 | 说明 |
ie6 | 50 | 4095 | 4095 | 当cookie的数量超过的时候,会踢出之前的生成的cookie,保存最新的cookie的值的 |
ie7 | 50 | 4095 | 4095 | 同上 |
ie8 | 50 | 4095 | 4095 | 同上 |
ie9 | 50 | 4095 | 4095 | 同上 |
firefox12 | 150 | 4097 | 4097 | 同上 |
chrome17 | 160~170 | 4097 | 4097 | 同上 |
Safari | 没有限制 | 4097 | 4097 |
六、利用cookie可以做什么?
(1)保存用户的登陆状态,例如上例中的,用户进行登陆,成功登陆后,服务器生成特定的cookie返回给客户端,客户端下次访问该域名下的任何页面,将该cookie的信息发送给服务器,服务器经过检验,
来判断用户是否登陆。
(2)记录用户的行为,例如,京东商场左下角有一个最近访问的产品记录信息,当当网上有你最近浏览过的书籍信息,都是根据用户访问页面,记录到cookie的信息来制作的。
(3)电商购物车的处理,因为在不同页面,点击添加到购物车,这个信息也是记到了cookie里面。结账的时候统一提交
(4)定制页面。如果网站提供了换肤的功能,我们这个时候也是将他记录到cookie里面,以便下次访问还是保持原来的风格页面。
七、cookie的安全性
cookie是不安全的,因为他可以被用户篡改。同时由于cookie存储大量的信息,一旦这些信息泄露出来,也是危害很大的,所以,我们要慎用cookie
附录:测试代码
<!DOCTYPE HTML> <html > <head> <meta charset="gbk"> <title></title> <script type="text/javascript"> function setCookie(key,value, expire, domain){ var exp = new Date(); exp.setTime(exp.getTime() + expire); var str = key + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString() + ";path=/;"; if (domain && domain != 'localhost') { str += "domain=" + domain; } document.cookie = str; } for(var i=0;i<300;i++){ setCookie('yupeng'+i,'test'+i); }; document.write(document.cookie); </script> </head> <body> <div onclick="alert('\"')">123123123</div> </body> </html>