（八）webStorage使用实例——利用storage事件实时监视webStorage中的数据
生活随笔
收集整理的這篇文章主要介紹了
（八）webStorage使用实例——利用storage事件实时监视webStorage中的数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?? 在HTML5中，可以通過window對象的storage事件進行監聽并指定其事件處理函數的方法來定義當其在其他頁面中修改sessionStorage或localStorage中的值時所要執行的處理，代碼如下：
?
window.addEventListener('storage',function(){//當sessionStorage或localStorage中的值發生變動時所要執行的處理},false);
在事件處理函數中，觸發事件的事件對象（event參數值）具有如下屬性：
1、event.key屬性：屬性值為在sessionStorage或localStorage中被修改的數據鍵值；
2、event.oldValue屬性：屬性值為在sessionStorage或localStorage中被修改前的值；
3、event.newValue屬性：屬性值為在sessionStorage或localStorage中被修改后的值；
4、event.url屬性：屬性值為在sessionStorage或localStorage中值的頁面URL地址；
5、event.storageArea屬性：屬性值為變動的sessionStorage對象或localStorage對象；
?
示例如下：
storage.html
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>利用storage事件實時監視webStorage中的數據</title><script>window.addEventListener('storage',function(event){if(event.key == "test"){var output = document.getElementById("output");output.innerHTML = "原有值：" + event.oldValue;output.innerHTML = "<br/>新值：" + event.newValue;output.innerHTML = "<br/>變動頁面地址：" + utf8_decode(unEscape(event.url));console.log(event.storageArea);//此行代碼只能在chrome瀏覽器中有效console.log(event.storageArea === localStorage);//輸出true}},false);function utf8_decode(utfText){var string = "";var i = 0;var c = c1 = c2= 0;while(i < utfText.length){c = utfText.charCodeAt(i);if(c <128){string += String.formCharCode(c);i++;}else if((c > 191) && (c < 224)){c2 = utfText.charCodeAt(i+1);string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));i += 2;}else{c2 = utfText.charCodeAt(i+1);c3 = utfText.charCodeAt(i+2);string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));i += 3;}}return string;}</script> </head> <body><output id="output"></output> </body> </html>?
storage2.html
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>修改webStorage中的數據</title><script>function setLocalStorage(){localStorage.test = document.getElementById("text1").value;}</script> </head> <body>請輸入一些值：<input type="text" id="text1" /><button οnclick="setLocalStorage()">設置</button> </body> </html>?
總結
以上是生活随笔為你收集整理的（八）webStorage使用实例——利用storage事件实时监视webStorage中的数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （七）webStorage使用实例——w
- 下一篇： 有关日志打印的几点经验