cookie和Web Storage

什么是cookie

cookie是由服务器生成，发送给User-Agent（通常是浏览器）的一小段文本信息，浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该cookie给服务器（前提是浏览器设置为启用cookie）。

当网页要发http请求时，浏览器会先检查是否有存储相应的cookie，有则自动添加在request header中的cookie字段中，服务器就会将特定的网页和操做数据返回给浏览器，从而记住用户的操做，减小了重复添加操做。

通常来讲，每一个域名下的cookie最大为4KB，cookie数量最多为20个（但不少浏览器厂商在具体实现时支持大于20个）。

cookie的操做

原生js获取cookie的API：document.cookie，该值是一个键-值形式的字符串。键值对之间由一个分号和一个空格隔开。

cookie属性

• expires：设置cookie在什么时间内有效。必须是GMT格式的时间，能够经过new Date().toGMTString()或new Date().toHTCString()来得到。若是没有设置该属性，则默认cookie在浏览器关闭以后就没有了。

expires是http/1.0协议中的选项，在新的http/1.1协议中已经由max-age选项代替，区别在于一个设置“到什么时间”，另外一个设置“持续多长时间”。max-age默认值是-1，即默认cookie在浏览器关闭以后就没有了。

• domain和path：domain是域名，path是路径，加起来构成URL，限制cookie能被哪些URL访问。若是没有设置，则domain默认是设置该cookie的网页所在的域名，path默认是设置该cookie的网页所在的目录。

发生跨域xhr请求时，即时请求URL的域名和路径都知足cookie的domain和path默认状况下cookie也不会自动被添加到请求头部中。

domain能够设置为页面自己的域名，或页面自己域名的父域，但不能是公共后缀。（例如www.baidu.com，domain能够设置为www.baodu.com，也能够设置为baidu.com，但不能设置为.com或者com）

• secure：用来设置cookie只有在安全的时候才发送。（协议）安全时才会被发送到服务器。默认为空（不设置），即都会被发送到服务器。

要想在网页中设置secure类型的cookie，必须保证网页是https协议的。

• httpOnly：这个选项用来设置cookie是否能经过js去访问。默认不带httpOnly选项，即默认为空。因此默认状况下客户端能够访问这个cookie。

在客户端不能经过js来设置一个httpOnly类型的cookie，只能在服务器端设置。

设置cookie

在服务器端返回的response header中有一项叫set-cookie，是服务器专门用来设置cookie的。可是要注意不能将多个cookie设置在一个set-cookie字段中，须要分开设置。每一个cookie均可以设置全部的属性选项。

Set-Cookie: ......
Set-Cookie: ......

客户端经过document.cookie就能够设置一个cookie，可是只能设置cookie的下列选项：expires、domain、path、secure。客户端设置多个cookie时也须要分开写。

document.cookie = ...
document.cookie = ...

• 修改cookie：从新赋值（path/domain要与旧cookie一致）
• 删除cookie：也是从新赋值，将新cookie的expires值设置为过去的一个时间点。可是path/domain依然要和旧cookie保持一致，否则就只是新增而不是修改

什么是Web Storage

Web Storage是一种存储机制，经过这种存储机制，浏览器能够以一种比cookie更加直观的方式安全地存储key/value值。

Storage对象与普通对象类似，都使用key/value来存储，可是他们在通过页面从新加载以后保持不变。key和value一般都是字符串（注意整数的key一般会被转换为字符类型）。咱们能够像使用对象同样获取这些值，如Storage.getItem()和Storage.setItem()方法。如下三种方式是同样的：

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

如下是两种Web Storage机制：

• sessionStorage：为每个给定的源维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面从新加载和恢复）
• localStorage：与sessionStorage功能相同，可是在浏览器关闭以后，从新打开时数据仍然存在。

这两种机制是经过Window.sessionStorage和window.localStorage属性使用（更确切的说是在支持的浏览器中Window对象实现了WindowLocalStorage和WindowSessionStorage对象并挂在其localStorage和sessionStorage属性下）--调用其中的任意一个会建立一个Storage对象的实例，经过这个实例能够添加、检索、删除数据。可是调用sessionStorage和localStorage建立的是不一样的Storage对象实例，他们独立运行和控制。

Web Storage的操做

• Storage.getItem()：从存储的数据中获取一个数据段，key做为该方法的参数，返回key对应的数据值。
• Storage.setItem()：建立新的数据值或者更新已经存在的数据值。该方法有两个参数：key和相对应的value值。
• Storage(event)：当Storage对象发生改变时，storage时间就会被触发。这个事件触发后，同一页面中的改变不会起做用，相同域名下的其余页面发生的改变才会起做用。
• Storage.removeItem()：接收key值做为参数，指仅仅删除这一个数据项。
• Storage.clear()：不接收参数，会清空整个storage对象。

三者的异同

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，不然永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4KB	通常为5MB
与服务器端通讯	每次都会携带在HTTP头中，若是使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通讯
做用域	在全部同源窗口中是共享的	在全部同源窗口中是共享的	不在不一样浏览器窗口中共享，即便是同一个页面

参考资料

聊一聊cookie

Using the Web Storage API

详说 Cookie, LocalStorage 与 SessionStorage