【前端】描述cookies，sessionStorage和localStorage的区别

汇总一下网络上的说法

链接：https://www.nowcoder.com/questionTerminal/e104d1a0512a42b5b8c61e43a4bc3d34

          http://www.w3school.com.cn/html5/html_5_webstorage.asp

cookie是小甜饼的意思。顾名思义，cookie确实非常小，它的大小限制为4kb左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看见“记住密码”，这通常就是通过在Cookie中存入一段辨明用户身份的数据来实现的。

localStorage是html5标准中新加入的技术，它并不是什么划时代的新东西。早在IE6时代，就有一个叫userData的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方法是使用flash。而如今，localStorage被大多数浏览器所支持。如果你的网站需要支持IE6+，那以userData作为你的polyfill的方案是种不错的选择。

sessionStorage与localStorage的接口类似，但保存数据的生命周期不同。session，直译过来是“会话”，而sessionStorage是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage中的数据就会被清空。

HTML5提供了两种在客户端存储数据的新方法：

1、localStorage-没有时间限制的数据存储

2、sessionStorage-针对一个session的数据存储

之前这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率不高。

相同点：都是保存在浏览器端，同源共享，即相同域下可以修改读取。

区别：

特性 Cookie localStorage sessionStorage 数据的生命周期 可设置失效时间，默认是浏览器关闭后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4K左右 一般为5MB 一般为5MB 与服务器端通信 每次都会携带在HTTP头中，如果使用Cookie保存过多数据会带来性能的问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信 仅在客户端（即浏览器）中保存，不参与和服务器的通信 易用性 需要程序员自己封装，源生的Cookie接口不友好 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

数据作用域不同：Cookie在所有同源窗口敏感词享。sessionStorage不在不同浏览器窗口敏感词享。localStorage在所有同源窗口敏感词享。