cookie与web Storage都是客户端（浏览器）中存储数据的方式。客户端存储用户信息的需求十分普遍，例如：用户无需重复登录某网站，同时网站也能“记住”用户的一些偏好。

cookie

由于HTTP是无状态协议，通过协议来保存用户信息的想法是无法实现的。所以，人们在客户端/服务端通信报文中加了一个“小尾巴”。客户端第一次发送请求，服务端报以响应并加了一个cookie；客户端第二次请求时就会附带这一个cookie，服务端便“认识”了这个请求是上个客户端发的，从而简化了一些需要向客户端确认的事情（登录信息等等）。

cookie的构成：

• 名称：cookie的名字，需要URL编码；
• 值：存储在cookie中的值，需要URL编码；
• 域：确定cookie所适用的域名，客户端所有向该域发送的请求中都会包含这条cookie。
• 路径：指定域中的某一路径才会发送cookie。指定路径后，同域不同路径将不会发送cookie。
• 失效时间：即字面意思。设置的时间格式为GMT（Wdy,DD-Mon-YY HH:MM:SS GMT）。不进行设置，则失效时间为关闭浏览器后。
• 安全标志：指定后，cookie只有使用了 SSL连接时才会发送到服务器。此时，使用https能够发送cookie，而http就不能发送了。

所以，cookie在HTTP请求中的构成如下：

HTTP/1.1 200 OK
Content-type:text/html
Set-cookie:name1=value1[; expries = GMT][; domain=" "][; path=" "][; secure]
Set-cookie:name2=value2[; expries = GMT][; domain=" "][; path=" "][; secure]
--------------------其它报文----------------------

cookie的限制：

• 同源：请求只有发送至指定域名时才会携带cookie，当然有一些hack方法是能够跨域的；
• 数量限制：同域名下cookie的数量是有限制的，每个浏览器的上限不太一样，一般在20~50个左右。有一个方式可以绕过这种限制：name=name1=value1&name2=value2&name3=value3，用这种方法可以骗过浏览器，但是不要过长。
• 尺寸限制：大多数浏览器将cookie限制在4096B，所以不要设置过长的cookie。

JavaScript中的cookie API：

JS是通过BOM的document.cookie来对cookie进行操作的。

• 查找：doucument.cookie可以直接获取网页中已经存在的cookie字符串,其格式为："name1=value1;name2=value2;name3=value3"

• 添加：通过document.cookie = "name=value[; expries = GMT][; domain=" "][; path=" "][; secure]"能够为该页面添加cookie。若name不同则添加一个新的name作为新的cookie，若name相同则覆盖原来的cookie。
  BUT！cookie的name和value需要通过URL编码，所以使用encodeURIcomponent()来进行编码，所以正确的形式应该是：
  document.cookie = encodeURIcomponent(name) + "=" + encodeURIcomponent(value) + "; domain=abc.com ;path=/ ; secure"

• 删除：没有直接删除cookie的方法，所以一般用覆盖或是设置失效时间的方式来删除不再需要的cookie。

总的来说，需要围绕document.cookie再次封装才能更好的使用cookie。但是把cookie暴露在公共环境中是很容易被XSS注入后获取的，可以设置cookie为HTTPOnly来避免被document.cookie直接获取。

Web存储

Web存储是HTML5规范中的新功能，其目的是为了提供一种区别于cookie能够存储大量数据的机制。
所有的Web存储是围绕着Storage这个构造函数来操作的：

Storage函数为页面创建了两个对象实例：sessionStorage/localStorage，将数据存储于实例中保存至浏览器本地，区别于cookie，它不需要在客户端与服务端之间来回通信，同时它将数据规模最大拓展至5MB（根据不同浏览器，略有不同）。Storage函数的方法如下：

• clear()：删除所有值；
• getItem(name)：根据指定的名字获取值；
• key(index)：获取index所在的name；
• removeItem(name)：删除该name的信息；
• setItem(name,value)：为指定的name设置一个值。

当然，也可以用对象/属性的方法来增删改查；

sessionStorage与localStorage这两个实例对象的差异在于：

• sessionStorage的失效时间为浏览器关闭后，而localStorage是永久保存；
• 两者虽然都是同源（不同于cookie，子域都不能跨越），sessionStorage更为严格，即使为相同域名，在相同浏览器中打开新页面的方式也不能让sessionStorage的数据传递。

此外，Storage提供事件监听，这个事件的event事件拥有四个属性：

• domain:操作的域名；
• key：操作的name;
• newValue：如果是设置值，则为新值；若是删除，则为null;
• oldValue：更改之前的值。