localStorage、sessionStorage和storage的监听

简单的介绍 localStorage 和 sessionStorage 的不同之处和 storageEvent 的使用（监听数据改变），关于使用方法应该都很熟悉，此文中不介绍了（下文中说的标签页，都是基于同源的）

WebStorage 是本地存储的总称，分为 localStorage 和 sessionStorage

1. localStorage（本地存储）

   1. 一直存在，除非手动清理（浏览器关闭，重新打开后仍然存在）

   2. 每个标签或窗口的 localStorage 是共享的，例如，同源的 A 和 B 标签，在 A 标签改动了 localStorage，B  标签的 localStorage  也会变化

2. sessionStorage（会话存储）

   1. 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

   2. 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文（即从 A 标签复制出 B 标签，包括 sesstionStorage）

   3. 每个标签或窗口的sessionStorage 是独立的，即使是复制出来的标签也是独立的，例如，从 A 标签复制出 B 标签，在 B 标签改动了 sessionstorage，A  标签的 sessionstorage 不会变化

   4. 存储的数据存在于会话期间，关闭对应浏览器标签或窗口，会清除对应的 sessionStorage

3. 共同点：

   1. 存储在本地，不会传输到服务器

   2. 键值对存储

4. 不同点：

   1. 存储时间不同

   2. 标签之间的数据独立性不同

   3. 由于独立性，storageEvent 只能用于 localStorage

5. storageEvent 的使用（下文中的 storage 特指 localStorage，监听不了sessionStorage，想要实现监听，需要自己实现）

   1. 只能监听标签之间的 storage 变化，同一个标签下不起作用（即同源的 A 和 B 标签，在 A 标签中监听变化，在 B 标签中更新 storage 值，会触发 A 标签中的监听回调）

   2. 监听的两种方式（addEventListener 和 onstorage）:

      1. window.addEventListener('storage',function(e) {
             if(e.key == 'xxx'){
             }
         });

      2. window.onstorage = function(e) {
             if(e.key == 'xxx'){
             }
         });

         window.onstorage = function (e){  if(e.key == 'xxx'){  } });

6. 无痕模式下的 localStorage 和 sessionStorage，基本特性与上述是一致的，在存储时间上，localStorage 与 sessionStorage 一样，关闭窗口不会保留数据