前端面试题必考（五）- Cookies 与 Session，SessionStore，LocalStore的区别及使用 / H5事件通知机制

一.Cookies 与 Session的区别及使用（参考：https://blog.csdn.net/liyifan687/article/details/80077928）

HTTP是一种无状态的协议，不知道链接是谁发起的，所以需要浏览器把登录信息存起来，Session和Cookie就是为解决这个问题而提出来的两个机制。

1.Cookie是服务器在本地机器上存储的小段文本，并随每一个请求发送至同一服务器，是在客户端保持状态的方案。有时也用Cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。Cookie的主要内容包括：名字，值，过期时间，路径和域。

过期时间如不设，则浏览器关掉就消失，存储在内存当中；否则就按设置的时间来存储在硬盘上的，过期后自动清除。
路径和域就是对应的域名，a网站的cookie自然不能给b用。

2.Session存储在服务端，每建立一个连接就会生成一个Session ID，并将其通过响应发送到浏览器。浏览器把Session ID存在Cookie中，浏览器第二次发送请求会将前一次服务器响应中的Session ID放在请求中一并发送到服务器上，服务器从请求中提取出Session ID，并和保存的所有Session ID进行对比，找到对应的存放用户数据的类HashTable结构。

当用户在应用程序的 Web页间跳转时，存储在 Session 对象中的变量不会丢失而是在整个用户会话中一直存在下去。
一般这个值会有个时间限制，超时后毁掉这个值，默认30分钟。

Cookie与Session的区别

存储数据量方面：Session 能够存储任意的 java 对象，SCookie 只能存储 String 类型的对象
Cookie 在客户端，Session在服务端。因Cookie在客户端所以可以编辑伪造，不是十分安全。
Session过多时会消耗服务器资源，大型网站会有专门Session服务器，Cookie存在客户端没问题。
域的支持范围不一样，比方说a.com的Cookie在a.com下都能用，而www.a.com的Session在api.a.com下都不能用，解决这个问题的办法是JSONP或者跨域资源共享。

3.LocalStorage 和SessionStorage：两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信；

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

sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。

Cookie 与SessionStorage 、LocalStorage 的区别(共同点：都是保存在浏览器端，且同源的。)

Cookie数据始终在同源的http请求中携带（即使不需要），即Cookie在浏览器和服务器间来回传递；Cookie数据还有路径（path）的概念，可以限制Cookie只属于某个路径下。存储大小限制也不同，Cookie数据不能超过4k，同时因为每次http请求都会携带Cookie，所以Cookie只适合保存很小的数据，如会话标识。而SessionStorage和LocalStorage不会自动把数据发给服务器，仅在本地保存。SessionStorage和LocalStorage 虽然也有存储大小的限制，但比Cookie大得多，可以达到5M或更大。
数据有效期不同，SessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

二.Web Storage 事件通知机制（参考：https://blog.csdn.net/ixygj197875/article/details/80114096）

Web Storage API内建了一套事件通知机制，当存储区域的内容发生改变（包括增加、修改、删除数据）时，就会自动触发 storage 事件，并把它发送给所有感兴趣的监听者。因此，如果需要跟踪存储区域的改变，就需要在关心存储区域内容的页面监听 storage 事件。

所有支持 localStorage 的浏览器都支持 storage 事件，包括 IE8。

但IE 8不支持 W3C 标准的 addEventListener。因此，为了监听 storage 事件，还需要检测浏览器支持哪种事件机制：

扫描二维码关注公众号，回复： 5482646 查看本文章

if (window.addEventListener) {
    window.addEventListener("storage", handleStorage, false);
} else {
    window.attachEvent("onstorage", handleStorage);
}

handleStorage 回调函数接受一个 StorageEvent 参数，在IE中，StorageEvent对象保存在 window.event 里面。

function handleStorage(e) {
  if (!e) {
    e = window.event;
  }
}

此时，变量 e 就是一个 StorageEvent 对象，这个对象有很多有用的属性。这些属性及含义请移步参考文章：https://blog.csdn.net/ixygj197875/article/details/80114096或者百度一下。

-------------------------------<本节完>------------------------------------------