HTML5實戰之本地存儲(1) - 兼容性與存儲監聽
很早之前調研過HTML5的本地存儲-《DOM Storage全解析》，大致上對localStorage、sessionStorage等API做了下了解，但是一直沒有機會真正的在項目中使用。終于這次借重構Web IM的機會，對本地存儲做了更深入的使用，除了基本的API使用之外還在次基礎上封裝了一些應用層的庫，例如Tab之間的操作同步、Tab之間的請求同步等。本文主要做一個階段性的經驗總結。
一、localStorge onstorage事件的兼容性
1. 觸發情況
IE8/IE9/Firefox3.6: 在頁面A中注冊onstorage事件，修改localStorage時，A頁面和其他頁面都能收到onstorage事件。因此，對于這些瀏覽器監聽onstorage時需要自己判斷是否是本頁面觸發的，并且忽略本頁面觸發的行為。
Chrome12/Firefox4/Opera11/Safari5中只有收到由其他頁面觸發的onstorage事件。
此外，Chrome14 DEV版本中測試發現，在頁面設置了document.domain之后，onstorage事件無論如何都不會觸發，此Bug導致在Chrome下無法使用onstorage事件。
2. 事件注冊
IE需要注冊在document上，其他均注冊在window上。
//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的數據發生了變化需要自己處理，其他瀏覽器則可以直接獲得數據。
4. 數據的獲取
IE9下在事件觸發時盡然無法立即獲取到對應key的值，需要使用setTimeout做異步處理。其他瀏覽器狀況良好。
二、監聽某個Key的變化
監聽某個key也就是在onstorage的基礎上更精細一些，這是之后各種應用的基礎。以下為實現方案：
1. onstorage可用時，監聽事件并在事件觸發時判斷是否指定的key
2. onstorage不可用(IE8以下、Chrome因domain問題)時使用Timer來檢查
var LocalStorage = (function(){
var ls = window.localStorage;
function _onstorage( key, callback ){
var oldValue = ls[key];
/*
IE下即使是當前頁面觸發的數據變更，當前頁面也能收到onstorage事件，其他瀏覽器則只會在其他頁面收到
*/
return function( e ){
//IE下不使用setTimeout盡然獲取不到改變后的值?!
setTimeout( function(){
e = e || window.storageEvent;
var tKey = e.key,
newValue = e.newValue;
//IE下不支持key屬性,因此需要根據storage中的數據判斷key中的數據是否變化
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之后會導致onstorage不觸發
鑒于onstorage的兼容性問題暫時不使用onstorage事件，改用傳統的輪詢方式檢查數據變化
*/
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是否發生變化的時間間隔
interval: 1000
};
})();</pre>
以上是LocalStorage接口的完整封裝，在localStorage不可用時使用UserData等其他替代方案來實現以上的接口即可。
下篇將會介紹在此基礎上實現的Tab之間的操作同步。
下一篇：HTML5實戰之本地存儲(2) - 操作同步
</div>
原文鏈接: http://varnow.org/?p=333
本文由用戶 webphp 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！