目录
如何实现浏览器多标签页之间的通信？
cookie、localStorage、sessionStorage的区别和使用？
| 名称 | 大小 | 网络请求 | 生命周期 |
|---|---|---|---|
| cookie | 4kb左右 | 每次都会携带在HTTP头中， 如果使用cookie保存过多数据会带来性能问题 |
默认是关闭浏览器后失效, 但是也可以设置过期时间 |
| localstorage | 5M | 仅在浏览器中保存，不参与和服务器的通信 | 除非手动被清除，否则永久保存 |
| SessionStorage | 5M | 仅在浏览器中保存，不参与和服务器的通信 | 仅在当前会话(窗口)下有效， 关闭窗口或浏览器后被清除, 不能设置过期时间 |
cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。
localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；
创建和访问localStorage：
1）、设置数据：
var forgetData = {phone:vm.phone};
localStorage.setItem("forgetData",JSON.Stringfy(forgetData)); // forgetData是存储在localStorage里边的本地数据； JSON.Stringfy(forgetData)是将数据转化为字符串格式；
获取数据：
vm.forgetData=JSON.parse(localStorage.getItem("forgetData")); //将字符串转化为JSON化；
2）、设置：localStorage.name = "zhao";
获取：localStorage.name //zhao
localStorage.setItem(key,value);//设置数据
localStorage.getItem(key);//获取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//清除所有localStorage的数据
sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；
共同点：都是保存在浏览器端，且同源的。
区别：
cookie数据始终在同源的http请求中携带9即使不需要)，即cookie在浏览器和服务器之间来回传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。
数据有效期不同：
sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；
localStorage：始终有效，浏览器窗口关闭也一直保存；
cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。
作用域不同:
sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；
localStorage在所有的同源窗口中都是共享的；
cookie也是在同源窗口中共享的。
如何实现浏览器多标签页之间的通信？
调用localStorage、cookie本地存储方式。