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
    };
})();

以上是LocalStorage接口的完整封裝，在localStorage不可用時使用UserData等其他替代方案來實現以上的接口即可。

下篇將會介紹在此基礎上實現的Tab之間的操作同步。

下一篇：HTML5實戰之本地存儲(2) - 操作同步