對HTML5中LocalStorage的一些使用建議

上個月末的w3ctech上，有同行提到了LocalStorage這個話題，我以爲在HTML5的衆多新特性中，LocalStorage算是比較實際同時瀏覽器也比較好實現的特性。

LocalStorage的規範描述在這裏：http://dev.w3.org/html5/webstorage/

首先一個細節，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。到那時，咱們能夠再作更深刻的討論和交流。