Storage事件

在某些複雜情況下，如果多個頁面都需要訪問本地儲存的資料，就需要在儲存區域的內容發生改變時，能夠通知相關的頁面。

Web Storage API內建了一套事件通知機制，當儲存區域的內容發生改變（包括增加、修改、刪除資料）時，就會自動觸發 storage 事件，並把它傳送給所有感興趣的監聽者。因此，如果需要跟蹤儲存區域的改變，就需要在關心儲存區域內容的頁面監聽 storage 事件。

所有支援 localStorage 的瀏覽器都支援 storage 事件，包括 IE8。但IE 8不支援 W3C 標準的 addEventListener。因此，為了監聽 storage 事件，還需要檢測瀏覽器支援哪種事件機制：

1. if(window.addEventListener){
2.     window.addEventListener("storage", handleStorage,false);
3. }else{
4.     window.attachEvent("onstorage", handleStorage);
5. }

handleStorage 回撥函式接受一個 StorageEvent 引數，在IE中，StorageEvent物件儲存在 window.event 裡面。

1. function handleStorage(e){
2. if(!e){
3. e = window.event;
4. }
5. }

此時，變數 e 就是一個 StorageEvent 物件，這個物件有很多有用的屬性。這些屬性及含義見表 5‑2：

得到這些屬性之後，就可以做任何想做的事情。接下來，通過一個完整的例項，來演示一下 localStorage 的 storage 事件機制。

假設有 save.html 和 show.html 兩個頁面，在 save 頁面觸發資料改變，在 show 頁面通過彈窗將相關資訊顯示出來。

在 save 頁面中，有一個文字框和一個儲存按鈕，使用者在文字框中輸入資料後，點選儲存按鈕，就會呼叫 saveItem() 函式將使用者的輸入儲存到本地儲存中。程式碼如下：

1. <inputtype="text"id="data"placeholder="input date to save">
2. <buttononClick="saveItem()">儲存</button>

1. <script>
2. function saveItem(){
3. var data = document.getElementById("data").value;
4.     localStorage.setItem("data", data);
5. }
6. </script>

在 show 頁面中，註冊事件監聽函式，來監聽 storage 事件，因為它關心儲存區域內容的變化：

1. <script>
2. if(window.addEventListener){
3.     window.addEventListener("storage", showStorage);
4. }else{
5.     window.attachEvent("onstorage", showStorage);
6. }
7. function showStorage(e){
8. if(!e){
9.      e = window.event;
10. }
11. var str ="key: "+ e.key +
12. "\nnewValue: "+ e.newValue +
13. "\noldValue: "+ e.oldValue +
14. "\nurl: "+ e.url +
15. "\nstorageArea: "+ e.storageArea;
16. alert(str);
17. }
18. </script>

此時，如果 save 頁面改變了儲存區域的內容，就會自動觸發 storage 事件，並把它傳送給所有監聽 storage 事件的頁面。

需要注意的是，只有在資料的內容確實發生改變的時候，才會觸發 storage 事件。如果把一個值設定成一模一樣的值，或刪除一個根本就不存在的儲存項，則不會觸發 storage 事件。並且，storage 事件只會傳送給同源、而且處於開啟狀態的其它頁面，而不會發送給觸發改變的頁面本身（即 save.html）及處於關閉狀態的頁面。因此，應當從Web伺服器上獲取本例項的頁面。

現在，同時開啟 save.html 和 show.html 頁面，先在 save 頁面輸入 123 並儲存，再輸入 12345 儲存。如圖 5‑7 所示：

第二次儲存時，儲存區域的內容發生改變，便觸發了 storage 事件，show 頁面就會收到 storage 事件，並呼叫showStorage() 函式來顯示相關的資訊。執行結果如圖 5‑8 所示：

說明：

文件源是通過協議、主機名、埠三者來確定的，只有三者都完全相同，才認為網頁是同源的。如，以下每個URL都是不同的文件源：

http://www.waibo.wang // 協議：http，主機名：www.waibo.wang

https://www.waibo.wang // 協議：https，不同協議

http://bbs.waibo.wang // 不同主機名

http://www.waibo.wang:8080 // 不同埠