前端面试题：cookie、sessionStorage、localStorage的区别

cookie、webStorage都是用来在客户端存放数据的选项。

简介：

1.cookie：

cookie在性质上是绑定在特定的域名下的。当设定了一个cookie后，再给该特定域名发送请求时，都会携带该cookie。
cookie在默认情况下，浏览器回话结束时，所有的cookie将会被删除，但也可以自己设置删除时间。

2.webStorage：

webStorage是HTML5新出的标签，目的是克服cookie带来的一些限制，当数据需要被严格控制客户端时，无须持续的将数据发现服务器。WebStorage的两个主要目标：

1）提供一种在cookie之外存储会话数据的途径；
2）提供一种存储大量可以跨会话存在的数据的机制。

Storage的实例与其他对象类似，有如下方法：

clear():删除所有的值；
getItem（name）：根据指定的name获取数据；
key(index)：获得index位置处的值的名字；
removeItem(name)：删除由name指定的键值对；
setItem（name，value）：为指定的name这只一个对应的value

2.1.sessionStorage：

1）sessionStorage存储特定于某个会话的数据，数据只保持到浏览器关闭
2）sessionStorage中的数据可以跨越页面 刷新而存在。
3）存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到，因而多页面应用存在限制。

2.2.localStorage：

1）localStorage是作为持久保存客户数据的方案，存储在localStorage中的数据会保留到通过JavaScript删除或者用户清楚浏览器缓存
2）要访问同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上

区别：

1、生命周期：

1）、cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。

2）、localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

3）、sessionStorage仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

可以简单的理解为：
sessionStorage，没有设置有效期的cookie。
如果说把cookie的有效期设置为永远永远，永久，那么就是localStorage。
cookie没有设置有效期，那么就是sessionStorage

2、网络流量：

cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，webstorage更加节约网络流量。

3、大小限制：

cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M

4、安全性：

WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。

5、使用方便性上：

WebStorage提供了一些方法，数据操作比cookie方便；