很早之前調研過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來檢查

JavaScript Code復制內容到剪貼板

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

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