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