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

一、localStorge onstorage事件的兼容性

1. 觸發(fā)情況

IE8/IE9/Firefox3.6: 在頁(yè)面A中注冊(cè)onstorage事件，修改localStorage時(shí)，A頁(yè)面和其他頁(yè)面都能收到onstorage事件。因此，對(duì)于這些瀏覽器監(jiān)聽(tīng)onstorage時(shí)需要自己判斷是否是本頁(yè)面觸發(fā)的，并且忽略本頁(yè)面觸發(fā)的行為。

Chrome12/Firefox4/Opera11/Safari5中只有收到由其他頁(yè)面觸發(fā)的onstorage事件。

此外，Chrome14 DEV版本中測(cè)試發(fā)現(xiàn)，在頁(yè)面設(shè)置了document.domain之后，onstorage事件無(wú)論如何都不會(huì)觸發(fā)，此Bug導(dǎo)致在Chrome下無(wú)法使用onstorage事件。

2. 事件注冊(cè)

IE需要注冊(cè)在document上，其他均注冊(cè)在window上。

//IE注冊(cè)在document上       
if( document.attachEvent && !K.Browser.opera ) {       
    document.attachEvent("onstorage", _onstorage(key,callback));       
}       
//其他注冊(cè)在window上       
else{       
    window.addEventListener("storage", _onstorage(key,callback), false);       
};       

3. 事件對(duì)象

IE中的storageEvent對(duì)象不包含key/newValue/oldValue等屬性，因此如果想知道是哪個(gè)Key的數(shù)據(jù)發(fā)生了變化需要自己處理，其他瀏覽器則可以直接獲得數(shù)據(jù)。

4. 數(shù)據(jù)的獲取

IE9下在事件觸發(fā)時(shí)盡然無(wú)法立即獲取到對(duì)應(yīng)key的值，需要使用setTimeout做異步處理。其他瀏覽器狀況良好。

二、監(jiān)聽(tīng)某個(gè)Key的變化

監(jiān)聽(tīng)某個(gè)key也就是在onstorage的基礎(chǔ)上更精細(xì)一些，這是之后各種應(yīng)用的基礎(chǔ)。以下為實(shí)現(xiàn)方案：

1. onstorage可用時(shí)，監(jiān)聽(tīng)事件并在事件觸發(fā)時(shí)判斷是否指定的key

2. onstorage不可用(IE8以下、Chrome因domain問(wèn)題)時(shí)使用Timer來(lái)檢查

JavaScript Code復(fù)制內(nèi)容到剪貼板

var LocalStorage = (function(){       
        var ls = window.localStorage;       
       
        function _onstorage( key, callback ){       
            var oldValue = ls[key];       
            /*     
                IE下即使是當(dāng)前頁(yè)面觸發(fā)的數(shù)據(jù)變更，當(dāng)前頁(yè)面也能收到onstorage事件，其他瀏覽器則只會(huì)在其他頁(yè)面收到     
             */       
            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)重寫(xiě)了document.domain之后會(huì)導(dǎo)致onstorage不觸發(fā)     
                鑒于onstorage的兼容性問(wèn)題暫時(shí)不使用onstorage事件，改用傳統(tǒng)的輪詢方式檢查數(shù)據(jù)變化     
            */       
            var b = K.Browser;       
       
            if( !this.useTimer ){       
                //IE注冊(cè)在document上       
                if( document.attachEvent && !K.Browser.opera ) {       
                    document.attachEvent("onstorage", _onstorage(key,callback));       
                }       
                //其他注冊(cè)在window上       
                else{       
                    window.addEventListener("storage", _onstorage(key,callback), false);       
                };       
            }       
            else{       
                /*     
                    Timer檢查方式     
                 */       
                var listener = _onstorage( key, callback );       
                setInterval(function(){       
                    listener({});       
                }, this.interval);       
            }       
        },       
        //是否使用Timer來(lái)check       
        useTimer: ( K.Browser.ie && K.Browser.ie < 8 ) || ( K.Browser.chrome ),       
        //檢查storage是否發(fā)生變化的時(shí)間間隔       
        interval: 1000       
    };       
})();       

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