html5的离线存储的研究（3）——cookie

最近看了localStorage和appcache，顺带着也研究了下cookie。在localStorage和sessionStorage出来后，感觉cookie已经什么作用了，然鹅我在日常业务中也没怎么使用cookie.......，前端方面使用cookie也只有document.cookie这一个api，感觉使用起来还是简单方便。这里着重记录一下它的注意点。

缺陷

会附加在每个http的请求中，无形中怎加了流量
http请求中是明文传递的，安全性成问题。（https除外）
大小限制在4kb

注意点

cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

也就是说他在www.a.com/index.html和www.a.com/index2.html中是可以共用的，但是在www.a.com和www.b.com下，就不行了。遵循跨域原则。

cookie 将信息存储于用户硬盘，它最根本的用途是 Cookie 能够帮助 Web 站点保存有关访问者的信息

存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。但是它是明文传输的，所以不要放一些敏感信息

存储在cookie的数据「每次」都会被浏览器「自动」放在http请求中。

浏览器有一个自主行为，就是会自动将该url下的cookie带入到request header中，这就很尴尬了，所以服务端在使用cookie的时候要时刻注意，那些有用的信息要放入，哪些无用的信息就避免放入，不然会增加带宽，影响性能，前端上如果使用axios发送请求，在不需要带上cookie的时候，可以设置withCredentialse为true， jquery同理。

使用流程

1.起作用

cookie 是存在用户硬盘中，用户每次访问站点时，Web应用程序都可以读取 Cookie 包含的信息。当用户再次访问这个站点时，浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie。如果该 Cookie 存在，浏览器就将它添加到request header的Cookie字段中，与http请求一起发送到该站点。

721543713-56fba554cad37_articlex.png

2. cookie的格式

浏览器提供了 cookie 属性给 JavaScript，因此可以通过 document.cookie 来访问这个页面中的cookie。

cookie的格式

这是一串字符串，仔细观察，我们可以发现规律。每个 cookie 都以名/值对的形式，即 name=value，名称和值都必须是URL编码的，且两对cookie间以分号和空格隔开。（ps：千万不要忘了空格，特别是在获取某个 cookie 时）

如果手动添加几个的话就是：

// document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"
document.cookie = "test1=myCookie1;"
document.cookie = "test2=myCookie2; domain=.google.com.hk; path=/webhp"
document.cookie = "test3=myCookie3; domain=.google.com.hk; expires=Sat, 04 Nov 2017 16:00:00 GMT; secure"
document.cookie = "test4=myCookie4; domain=.google.com.hk; max-age=10800;"

domain、Path、Expries/Max-age、httponly(即HTTP选项）、Secure 等均是 cookie 的属性，

domain、path：指定cookie在哪些域中共享
Expries/Max-age：失效时间和失效时间段，前者规定一个gmt时间，Sat, 04 Nov 2017 16:00:00 GMT，这表明这个 cookie 将在2017-11-04的16时整失效，而后者是一个时间段，例如max-age=10800;"，也就是生效时间是3个小时，新的http协议已经使用这个字段替换了expries
secure： secure是 cookie 的安全标志，通过cookie直接包含一个secure单词来指定，也是cookie中唯一一个非名值对儿的部分。指定后，cookie只有在使用SSL连接（如HTTPS请求）时才会发送到服务器。
默认情况为空，不指定 secure 选项，即不论是 http 请求还是 https 请求，均会发送cookie。
httponly：httponly属性是用来限制客户端脚本对cookie的访问。将 cookie 设置成 httponly 可以减轻xss攻击的危害，防止cookie被窃取，以增强cookie的安全性。（由于cookie中可能存放身份验证信息，放在cookie中容易泄露），如果设置了httponly，js是无法读取和修改 httponly cookies，当然也不能设置 cookie 为 httponly，这只能通过服务器端去设置。默认情况是不指定 httponly，即可以通过 js 去访问。

cookie编码

感觉没啥乱用，但还是记录下，简单的就是在关键value上加上encodeURIComponent

document.cookie = encodeURIComponent("test") + "=" + encodeURIComponent("myCookie") + "; max-age=3600";

cookie删除，修改

cookie的删除其实特别简单，也是对此cookie重新赋值，将expries设为一个过去的时间或将max-age设为0，都可以删除cookie。同时也要特别注意此cookie的domain、path要与原来保持一致