HTML5：storage事件

H5标准新增的本地存储localStorage已经很熟悉了，但是还有个storage事件监听头一次听说，这个事件可以通过更新localstorage来触发，而且当前在同一个浏览器下打开的所有同源页面都可以监听得到！

例如，当前在浏览器中打开了tab1和tab2两个标签页，url分别为www.localhost.com/index.html 和 www.localhost.com/list.html：

//tab1中
window.addEventListener('storage',function(e){
    console.log(e.key, e.oldValue, e.newValue);
});

//tab2中
<button id="btn" type="button">click</button>
<script>
    document.getElementById('btn').addEventListener('click',function(){
        localStorage.setItem('tabs','1');
        localStorage.setItem('tabs','2');
        localStorage.removeItem('tabs');
    })
</script>       

此时（之前没有设置过localStorage的tabs的情况下），在tab2中点击btn按钮，tab1会在控制台打印出三行结果，分别是 'tabs null 1' 、 'tabs 1 2' 和 'tabs 2 null' 。

通过这个例子可以看出，storage事件可以通过创建、更新、删除当前域名下localstorage中的数据来触发。此外，storage事件的处理函数接受的event事件对象也和通常的事件对象不同：

//StorageEvent对象
{
    bubbles: false,
    cancelBubble: false,
    cancelable: false,
    composed: false,
    currentTarget: {...}, //当前Window对象
    defaultPrevented: false,
    eventPhase: 0,
    isTrusted: true,
    key: "tabs",//更新的item键名
    newValue: "1",//更新后的item键值
    oldValue: "2",//更新前的item键值
    path: [Window],//一个数组，数组中有一个元素，为当前Window对象
    returnValue: true,
    srcElement: {...}, //当前Window对象
    storageArea: {...}, //Storage对象
    target:{...}, //当前Window对象
    timeStamp: 101647.2000000067,
    type: "storage",
    url: "http://www.localhost.com/list.html",//更新localStorage的页面
    __proto__: StorageEvent
}

通过上面的示例可以看到，storage事件的event对象是一个StorageEvent对象，这个对象中包含了几个重要属性：

url：更新localStorage的tab的url

target：当前窗口对象

key： 更新的item键名

newValue：更新后的item键值

oldValue：更新前的item键值

通过这些属性我们可以做很多操作，例如页面之间互相传值，统计当前打开的页面数量（限同源页面）等。