您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“HTML 5本地存儲的兼容性與存儲監(jiān)聽舉例分析”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
1. 觸發(fā)情況
IE8/IE9/Firefox3.6: 在頁面A中注冊onstorage事件,修改localStorage時,A頁面和其他頁面都能收到onstorage事件。因此,對于這些瀏覽器監(jiān)聽onstorage時需要自己判斷是否是本頁面觸發(fā)的,并且忽略本頁面觸發(fā)的行為。
Chrome12/Firefox4/Opera11/Safari5中只有收到由其他頁面觸發(fā)的onstorage事件。
此外,Chrome14 DEV版本中測試發(fā)現(xiàn),在頁面設(shè)置了document.domain之后,onstorage事件無論如何都不會觸發(fā),此Bug導(dǎo)致在Chrome下無法使用onstorage事件。
2. 事件注冊
IE需要注冊在document上,其他均注冊在window上。
JavaScript Code復(fù)制內(nèi)容到剪貼板
//IE注冊在document上 if( document.attachEvent && !K.Browser.opera ) { document.attachEvent("onstorage", _onstorage(key,callback)); } //其他注冊在window上 else{ window.addEventListener("storage", _onstorage(key,callback), false); };
3. 事件對象
IE中的storageEvent對象不包含key/newValue/oldValue等屬性,因此如果想知道是哪個Key的數(shù)據(jù)發(fā)生了變化需要自己處理,其他瀏覽器則可以直接獲得數(shù)據(jù)。
4. 數(shù)據(jù)的獲取
IE9下在事件觸發(fā)時盡然無法立即獲取到對應(yīng)key的值,需要使用setTimeout做異步處理。其他瀏覽器狀況良好。
監(jiān)聽某個key也就是在onstorage的基礎(chǔ)上更精細(xì)一些,這是之后各種應(yīng)用的基礎(chǔ)。以下為實現(xiàn)方案:
1. onstorage可用時,監(jiān)聽事件并在事件觸發(fā)時判斷是否指定的key
2. onstorage不可用(IE8以下、Chrome因domain問題)時使用Timer來檢查
JavaScript Code復(fù)制內(nèi)容到剪貼板
var LocalStorage = (function(){ var ls = window.localStorage; function _onstorage( key, callback ){ var oldValue = ls[key]; /* IE下即使是當(dāng)前頁面觸發(fā)的數(shù)據(jù)變更,當(dāng)前頁面也能收到onstorage事件,其他瀏覽器則只會在其他頁面收到 */ return function( e ){ //IE下不使用setTimeout盡然獲取不到改變后的值?! setTimeout( function(){ e = e || window.storageEvent; var tKey = e.key, newValue = e.newValue; //IE下不支持key屬性,因此需要根據(jù)storage中的數(shù)據(jù)判斷key中的數(shù)據(jù)是否變化 if( !tKey ){ var nv = ls[key]; if( nv != oldValue ){ tKey = key; newValue = nv; } } if( tKey == key ){ callback && callback(newValue); oldValue = newValue; } }, 0 ); } } return { getItem: function( key ){ return ls.getItem( key ); }, setItem: function( key, val ){ return ls.setItem( key, val ); }, removeItem: function( key, val ){ return ls.removeItem( key ); }, clear: function(){ return ls.clear(); }, onstorage: function( key, callback ){ //IE6/IE7/Chrome使用Timer檢查更新,其他使用onstorage事件 /* Chrome下(14.0.794.0)重寫了document.domain之后會導(dǎo)致onstorage不觸發(fā) 鑒于onstorage的兼容性問題暫時不使用onstorage事件,改用傳統(tǒng)的輪詢方式檢查數(shù)據(jù)變化 */ var b = K.Browser; if( !this.useTimer ){ //IE注冊在document上 if( document.attachEvent && !K.Browser.opera ) { document.attachEvent("onstorage", _onstorage(key,callback)); } //其他注冊在window上 else{ window.addEventListener("storage", _onstorage(key,callback), false); }; } else{ /* Timer檢查方式 */ var listener = _onstorage( key, callback ); setInterval(function(){ listener({}); }, this.interval); } }, //是否使用Timer來check useTimer: ( K.Browser.ie && K.Browser.ie < 8 ) || ( K.Browser.chrome ), //檢查storage是否發(fā)生變化的時間間隔 interval: 1000 }; })();
“HTML 5本地存儲的兼容性與存儲監(jiān)聽舉例分析”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。