（八）webStorage使用实例——利用storage事件实时监视webStorage中的数据
生活随笔
收集整理的這篇文章主要介紹了
（八）webStorage使用实例——利用storage事件实时监视webStorage中的数据
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?? 在HTML5中，可以通過window對象的storage事件進行監(jiān)聽并指定其事件處理函數(shù)的方法來定義當其在其他頁面中修改sessionStorage或localStorage中的值時所要執(zhí)行的處理，代碼如下：
?
window.addEventListener('storage',function(){//當sessionStorage或localStorage中的值發(fā)生變動時所要執(zhí)行的處理},false);
在事件處理函數(shù)中，觸發(fā)事件的事件對象（event參數(shù)值）具有如下屬性：
1、event.key屬性：屬性值為在sessionStorage或localStorage中被修改的數(shù)據(jù)鍵值；
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事件實時監(jiān)視webStorage中的數(shù)據(jù)</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中的數(shù)據(jù)</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
- 下一篇： （九）HTML5本地存储——本地数据库S