前端面试07-2：cookie sessionStorage localStorage 区别

1、localStorage(本地存储)：
localStorage生命周期是永久，除非用户在浏览器上清除 localStorage信息，否则这些信息将永远存在。存放数据大小为一般为 5MB ,而且它仅在客户端（即浏览器）中保存，不参与服务器的通信。

2、sessionStorage(会话存储)：
sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与服务器的通信。源生接口可以接受，可再次封装来对 Object 和 Array有更好的支持。

3、localStorage(本地存储)和sessionStorage(会话存储)的联系
相同和不同点：

存储大小相同： localStorage 和 sessionStorage 的存储数据大小一般都是：5MB
存储位置相同： localStorage 和 sessionStorage 都保存在客户端，不与服务器进行交互通信
存储内容类型相同： localStorage 和 sessionStorage 只能存储字符串类型，对于复杂的对象可以使用 ECMAScript 提供的 JSON 对象的 stringify 和 parse 来处理
获取方式不同： localStorage：window.localStorage;；sessionStorage：window.sessionStorage;
应用场景不同： localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，而 sessionStorage ：敏感账号一次性登录
作用域的不同：不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享 sessionStorage 的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个 iframe 标签且他们属于同源页面，那么他们之间是可以共享 sessionStorage的
共同优点：

存储空间更大： cookie 为 4KB，而 WebStorage 是 5MB
节省网络流量： WebStorage 不会传送到服务器，存储在本地的数据可以直接获取，也不会像 cookie 一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量
对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据， sessionStorage 会非常方便
快速显示：有的数据存储在 WebStorage 上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快
安全性： WebStorage 不会随着 HTTP header 发送到服务器端，所以安全性相对于 cookie 来说比较高一些，不会担心截获，但是仍然存在伪造问题
WebStorage 提供了一些方法，数据操作比 cookie 方便
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear() —— 删除所有的数据
key (index) —— 获取某个索引的key
4、cookie
概念： HTTP Cookie 简称 cookie,在 HTTP 请求发送 Set-Cookie HTTP 头作为响应的一部分。通过 name=value 的形式存储

生命期为只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为 4K 左右 。有个数限制（各浏览器不同），一般不能超过20个。
与服务器端通信：每次都会携带在HTTP头中，如果使用 cookie 保存过多数据会带来性能问题

cookie的构成如下：

名称： name(不区分大小写,但最好认为它是区分的)
值: value(通过URL编码:encodeURIComponent)
**域
路径
失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间
安全标志:设置安全标志后只有SSL连接的时候才发送到服务器
cookie的作用:主要用于保存登录信息

** cookie 的优点：**具有极高的扩展性和可用性，通过良好的编程，控制保存在 cookie 中的 session 对象的大小，通过加密和安全传输技术，减少 cookie 被破解的可能性，只有在 cookie 中存放不敏感的数据，即使被盗取也不会有很大的损失，控制 cookie 的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的 cookie

cookie的缺点： cookie 的长度和数量的限制。每个 domain 最多只能有20条 cookie，每个 cookie 长度不能超过 4KB，否则会被截掉
安全性问题。如果 cookie 被人拦掉了，那个人就可以获取到所有 session 信息。加密的话也不起什么作用
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用

三者之间的区别与联系
1、cookie在浏览器与服务器之间来回传递
sessionStorage 和 localStorage 不会把数据发给服务器，仅在本地保存

2、数据有效期不同
cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage： 始终有效，长期保存

3、cookie 数据还有路径的概念，可以限制 cookie 只属于某个路径下
存储大小也不同，cookie 数据不能超过4k，sessionStorage 和localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大

4、作用域不用
sessionStorage：不在不同的浏览器窗口中共享
localStorage：在所有同源窗口中都是共享的
cookie：也是在所有同源窗口中都是共享的
Storage：支持事件通知机制，可以将数据更新的通知发送给监听者。