很早之前調(diào)研過HTML5的本地存儲-《DOM Storage全解析》，大致上對localStorage、sessionStorage等API做了下了解，但是一直沒有機(jī)會真正的在項(xiàng)目中使用。終于這次借重構(gòu)Web IM的機(jī)會，對本地存儲做了更深入的使用，除了基本的API使用之外還在次基礎(chǔ)上封裝了一些應(yīng)用層的庫，例如Tab之間的操作同步、Tab之間的請求同步等。本文主要做一個階段性的經(jīng)驗(yàn)總結(jié)。

一、localStorge onstorage事件的兼容性

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上。

//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的變化

監(jiān)聽某個key也就是在onstorage的基礎(chǔ)上更精細(xì)一些，這是之后各種應(yīng)用的基礎(chǔ)。以下為實(shí)現(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       
    };       
})();       

1. HTML 5拖拽預(yù)覽
2. HTML 5開發(fā)：地理位置定位指南
3. 如何在ASP.NET網(wǎng)站中使用HTML 5拖放功能
4. 關(guān)于HTML 5幾個重要安全問題
5. 教你用CSS3打造HTML5的Logo