sessionStorage、localStorage、cookie的区别

1.基本定义

Cookie

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

Web Storage

HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。
其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。
由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。
本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，
原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，
这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

localStorage

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

sessionStorage

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

2.区别

1287779-20180404065845701-1111813120.png

3.sessionStorage使用注意

1）、不同浏览器无法共享localStorage和sessionStorage的值。

2）、相同浏览器下，并且是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage值，通过跳转的页面可以共享sessionStorage值。

3）、关于sessionStorage，通常说sessionStorage关闭页面即消失，但是通过跳转的页面可以共享sessionStorage值，跳转有多种方式：

(1)  跳转    //原窗口
(2) 跳转  //新开窗口
(3) window.location.href = '同源页面'      //原窗口
(4) window.location.replace('同源页面')   //原窗口
(5) window.open('同源页面')       //新开窗口
(6) this.$router.push({path: '同源页面'})   //通过路由跳转共享值

app端通过原生方法更换webView实现跳转，这种方式不能共享sessionStorage，
原窗口跳转的页面传递sessionStorage，
改变存储值会相互影响，
新开窗口跳转方式传递sessionStorage，改变存储值互不影响。

4.localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

5.同源说明

http://www.test.com
http://www.test.com/app.html（同源，端口、协议、主机名/域名相同）
https://www.test.com （不同源，因为协议不同）
http://my.test.com（不同源，因为主机名不同）
http://www.test.com:8080（不同源，因为端口不同）