Question

cookie，localStorage，sessionStorage 的区别

Answer 1

cookie 是在HTML4 中使用的给客户端保存数据的，也可以和session 配合实现跟踪浏览器用户身份；而webstorage （包括：localStorage 和sessionStorage ）是在HTML5 提出来的，纯粹为了保存数据，不会与服务器端通信。WebStorage 两个主要目标：（1 ）提供一种在cookie 之外存储会话数据的路径。（2 ）提供一种存储大量可以跨会话存在的数据的机制。

相同点：

cookie ，localStorage ，sessionStorage 都是在客户端保存数据的，存储数据的类型：都是字符串。

不同点：

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 方便；

               setItem (key, value) ——  保存数据，以键值对的方式储存信息。

      　　  getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

        　　removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

        　　clear () ——  删除所有的数据

        　　key (index) —— 获取某个索引的key