localStorge之storage事件

隨著h5的流行和mobile開發，localStorage已經不再是個陌生詞，相信大多數童鞋都已經接觸過它並用過，但是storage事件相信還是有很多童鞋不太明白甚至沒接觸過，今天我們主要聊聊storage。

先看w3c關於storage都描述：

4.4 The storage event


The storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).


When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document object has a Storage object that is affected.

它說得很清晰，當存儲的storage數據發生變化時都會觸發它，但是它不同於click類的事件會冒泡和能取消，同時最後這句才是重點，storage改變的時候，觸發這個事件會調用所有同域下其他窗口的storage事件，不過它本身觸發storage即當前窗口是不會觸發這個事件的（當然ie這個特例除外，它包含自己本事也會觸發storage事件）。這句話說的有點繞口，看代碼把。

DEMO:

頁面a下，有個input框用來存儲store，它自身綁定了storage事件，這個時候寫入新的數據點擊保存，這時新的sotre數據保存了，但是頁面a的storage事件沒觸發，

而頁面b下，綁定的storage事件則觸發了。（ps：前提頁面a和b在同域下，並都是打開狀態不同窗口）；

頁面a代碼：

  
  



save
<script>
  (function(D){
    var val = D.getElementsByTagName("input")[0],
      btn = D.getElementsByTagName("button")[0];
    btn.onclick = function(){
      var value = val.value;
      if(!value) return;
      localStorage.setItem("key", val.value);
    };
    window.addEventListener("storage", function(e){
      console.log(e);
    });
  })(document);
</script>

  
  


<script>
  window.addEventListener("storage", function(e){
    console.log(e);
    document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)
  });

</script>

看到這裡是不是很疑惑那storage事件到底有什麼用，多窗口間多通信用到它就是最好選擇了，比如某塊公用內容區域基礎數據部分都是從store中提取的，這個區域中大多數頁面中都有，當用戶打開多個頁面時，在其中一個頁面做了數據修改，那其他頁面同步更新是不是很方便（當前頁面就要用其他方式處理了），當然用於窗口間通信它作用不僅僅如此，更多的大家可以利用它特性去發揮。

ps：

順帶補充下，在上面的demo頁面b中storage的events對象的屬性常用的如下：

oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。

newValue：更新後的值。如果該鍵被刪除，則這個屬性為null。

url：原始觸發storage事件的那個網頁的網址。

key：存儲store的key名；

另外store雖好可不要貪“杯”噢，大量冗余數據存儲最後可是災難，而且store安全性有限，重要數據也要注意。