對HTML5中LocalStorage的一些使用建議 

2012-01-05 11:05:58|  分類： web開發 |字號 訂閱
上個月末的w3ctech上，有同行提到了LocalStorage這個話題，我覺得在HTML5的眾多新特性中，LocalStorage算是比較實際同時瀏覽器也比較好實現的特性。

首先一個細節，LocalStorage只能儲存鍵值對(key-value pair)形式的資料，並且key和value都只能儲存為字串型別。之所以這樣說，因為JS是動態語言，我們可以在setItem時傳入int型資料(比如localStorage.setItem("a", 1))，但是它會轉換成字串之後再進行儲存和準備隨時呼叫，當我們用getItem訪問"a"時(localStorage.getItem("a"))，得到的是字串"1"而非數字1。

第二，雖然localStorage[key] = value的寫法主流的瀏覽器都是支援的，但標準裡並沒有明確的要求，所以不推薦這樣書寫程式碼。而且很顯而易見的問題是：對length、setItem、getItem、clear這樣的key進行讀寫是會產生問題的。假如我們執行：

localStorage.setItem = null;
localStoarge.removeItem = null;
localStorage.clear = null;
那麼整個LocalStorage的介面完備性將會遭到破壞。

當然，對JS比較熟悉的童鞋可以思考一個附加的變態問題，執行了上述程式碼之後，localStorage還有沒有辦法恢復正常呢？

第三，如果我們不想儲存字串，而是型別更豐富結構更復雜的資料，我們推薦大家和JSON的相關函式JSON.parse/JSON.stringify配合使用。這樣我們可以方便複雜資料結構和字串之間的轉換，獲取資料的時候使用JSON.parse(localStorage.getItem("a"))，寫入資料的時候使用localStorage.setItem("a", JSON.stringify(obj))。

第四，LocalStorage跟cookies一樣是按照域名為單位進行獨立儲存的，且是有容量上限的(一般為5MB)，當我們呼叫setItem時如果超過容量上限，會觸發QuotaExceededError異常。我的經驗是，如果你是存文字的，一般碰不到這根線，可以無視；如果用DataURI方式存二進位制檔案，就需要特別注意了，視訊的話，基本沒有5MB以下的，所以不會考慮LocalStorage的，也不用特別注意；但如果是圖片，很容易幾百K的圖片多存幾張就夠5MB了，所以有必要提個醒。當然有些瀏覽器也會通過提醒使用者確認來允許網站使用更多的容量，那個是另一說了。

上述四個建議是我個人使用LocalStorage最常碰到的狀況，這裡分享給大家。

最後在附送一個"高階"技巧：window.onstorage事件。其實這也不算多高階，只是用的地方比較少罷了。假如我們同時打開了同域下的多個頁面，這時我在一個頁面裡操作localStorage.setItem、localStorage.removeItem或localStorage.clear，其它同域的頁面就會觸發這個事件。事件附帶的引數是這樣的：
window.onstorage = function (event) {
    var key = event.key // 被修改的鍵名
    var oldValue = event.oldValue // 舊的值
    var newValue = event.newValue // 新的值
    var url = event.url // 觸發改變的網頁的url
    var storage = event.storageArea // 當前localStorage的引用(當sessionStorage改變時，這裡就是當前sessionStorage的引用，好吧扯遠了，看不懂可以先無視)
}

這個特性可以幫助我們在多個頁面間實現簡單的通訊、同步和資料互動，比如在一個網站的使用者設定頁面中修改使用者暱稱，那麼你的所有頁面中的暱稱也都瞬間改變了。當然，與之產生的注意事項是要回避迴圈修改，以免瀏覽器進入死迴圈。

以上

其實對於LocalStorage還有很多細節，對HTML5感興趣的童鞋可以進一步挖掘。來年的交流會上，我們一定還會聊到LocalStorage。到那時，我們可以再做更深入的討論和交流。