上個月末的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的引用，好吧扯遠了，看不懂可以先無視)
} 這個特性可以幫助我們在多個頁面間實作簡單的通信、同步和資料互動，比如在一個網站的使用者設定頁面中修改使用者昵稱，那麼你的所有頁面中的昵稱也都瞬間改變了。當然，與之産生的注意事項是要回避循環修改，以免浏覽器進入死循環。