HTML5 storage事件監聽
引用《h5移動web開發指南》上的話:
“當同源頁面的某個頁面修改了localStorage,其餘的同源頁面只要註冊了storage事件,就會觸發”
所以,localStorage storage的例子執行需要如下條件:
同一瀏覽器打開了兩個同源頁面
其中一個網頁修改了localStorage
另一網頁註冊了storage事件
Storage事件
在某些複雜情況下,如果多個頁面都需要訪問本地儲存的資料,就需要在儲存區域的內容發生改變時,能夠通知相關的頁面。
Web Storage API內建了一套事件通知機制,當儲存區域的內容發生改變(包括增加、修改、刪除資料)時,就會自動觸發 storage 事件,並把它傳送給所有感興趣的監聽者。因此,如果需要跟蹤儲存區域的改變,就需要在關心儲存區域內容的頁面監聽 storage 事件。
所有支援 localStorage 的瀏覽器都支援 storage 事件,包括 IE8。但IE 8不支援 W3C 標準的 addEventListener。因此,為了監聽 storage 事件,還需要檢測瀏覽器支援哪種事件機制:
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 物件,這個物件有很多有用的屬性。這些屬性及含義見表:
表 StorageEvent物件的屬性及含義
屬性 含義
key 設定或刪除或修改的鍵。呼叫clear()時,則為null。
oldValue 改變之前的舊值。如果是新增元素,則為null。
newValue 改變之後的新值。如果是刪除元素,則為null。
storageArea 該屬性是一個引用,指向發生變化的sessionStorage或localStorage物件
url 觸發這個改變事件的頁面的URL
得到這些屬性之後,就可以做任何想做的事情。接下來,通過一個完整的例項,來演示一下 localStorage 的 storage 事件機制。
假設有 save.html 和 show.html 兩個頁面,在 save 頁面觸發資料改變,在 show 頁面通過彈窗將相關資訊顯示出來。
在 save 頁面中,有一個文字框和一個儲存按鈕,使用者在文字框中輸入資料後,點選儲存按鈕,就會呼叫 saveItem() 函式將使用者的輸入儲存到本地儲存中。程式碼如下:
<input type="text" id="data" placeholder="input date to save">
<button onClick="saveItem()">儲存</button>
<script>
function saveItem() {
var data = document.getElementById("data").value;
localStorage.setItem("data", data);
}
</script>
在 show 頁面中,註冊事件監聽函式,來監聽 storage 事件,因為它關心儲存區域內容的變化:
<script>
if (window.addEventListener) {
window.addEventListener("storage", showStorage);
} else {
window.attachEvent("onstorage", showStorage);
}
function showStorage(e) {
if (!e) {
e = window.event;
}
var str = "key: " + e.key +
"\nnewValue: " + e.newValue +
"\noldValue: " + e.oldValue +
"\nurl: " + e.url +
"\nstorageArea: " + e.storageArea;
alert(str);
}
</script>
此時,如果 save 頁面改變了儲存區域的內容,就會自動觸發 storage 事件,並把它傳送給所有監聽 storage 事件的頁面。
需要注意的是,只有在資料的內容確實發生改變的時候,才會觸發 storage 事件。如果把一個值設定成一模一樣的值,或刪除一個根本就不存在的儲存項,則不會觸發 storage 事件。並且,storage 事件只會傳送給同源、而且處於開啟狀態的其它頁面,而不會發送給觸發改變的頁面本身(即 save.html)及處於關閉狀態的頁面。因此,應當從Web伺服器上獲取本例項的頁面。
&n