一、引言
HTML5雖未來到其鼎盛時期，但這並不妨礙我們在實際項目中漸進使用HTML5的一些特性。就我所做的項目而言，應用的HTML5相關特性有：data-自定義屬性、placeholder、以及email類型input文本框。上週新上線的會員中心，自己又應用了HTML5相關內容——HTML5 localStorage本地存儲，這裏簡單分享下，希望能觸動一下大家的小小神經。
二、實例展示
實際在線的頁面訪問，如果不是會員，還需要註冊。煩那！所以自己就把其高保真獨立出來，做了個HTML版本的demo頁面。
您可以狠狠地點擊這裏：HTML5 localstorage本地存儲應用demo
進入demo頁面，您可以看到左側一個高高的（如果你是首次進入）的垂直菜單欄，長相如下：
點擊次級標題欄（灰色漸變的標題欄）會有展開收起的動作。例如點擊首頁標題欄“訂單中心”，對應列表項收起，然後你刷新頁面，該列表項依舊處於收起狀態。如下圖：
三、實現探究
有意思！怎麼玩的呢？這裏賣個關子，先看看京東商城的做法。
我們這裏的垂直菜單欄應該是參考京東商城個人中心的菜單欄設計的；京東的記錄用戶展開收起細則的做法是使用cookie，所有瀏覽器都使用cookie，一個關鍵字爲myjd的cookie，如下截圖所示（FireFox6下）：
這是很OK的做法，客戶端記錄一些可以丟失的數據，且大小不大的時候，cookie是首選，畢竟，所有的瀏覽器都鳥它。
我個人對cookie並沒有什麼好感，一是大小限制，貌似4K左右，而是IE6瀏覽器下每個域名下好像還有個數限制。我生性自由之人，最受不了限制了。好在我們迎來了HTML5，其中有個很犀利實用的東東，就是localStorage本地存儲，有5M大小，而且IE瀏覽器從IE8開始就已經支持了。
所說IE6~7瀏覽器尚不支持，但這並不影響我們在實際項目中使用。此話怎講，IE6~7瀏覽器依舊採用傳統的cookie保持信息，而其他瀏覽器就使用HTML5的本地存儲功能。這裏不同瀏覽器不同做法的成本是很低的，尤其在某些JS庫下（因爲使用參數，格式等都一致）。
上面所說的某些JS庫之一就是MooTools庫，因爲我所從事的項目都與基於MooTools庫的，因此，使用本地存儲的成本就小些。MooTools庫自身就攜帶讀寫cookie的功能，且參數個數，使用與localStorage本地存儲一致。
具體實現如下：
數據存儲
我們每次點擊一個標題欄，都要把它的顯示狀態記錄。例如，放在一個數組中，然後存儲之，代碼如下（假設我們已經記錄了各標題欄狀態爲數組arrDisplay）：
var arrDisplay = [0, 1, 1, 1];
//存儲，IE6~7 cookie 其他瀏覽器HTML5本地存儲
if (window.localStorage) {
localStorage.setItem("menuTitle", arrDisplay);
} else {
Cookie.write("menuTitle", arrDisplay);
}
數據讀取
當我們每次load頁面的時候，就要將相對應的數據讀出來。如下：
var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");
需要注意的是：雖然我們存儲的是數組，但是，實際上存儲的的是數組字符化後的字符串(Cookie和localStorage都是)，因此，我們在處理strStoreDate的時候，一定要當作字符串處理，類似下面：
strStoreDate.split(",").each(function(display, index) {
//根據存儲的display觸發相對應的動作
});
以上就是用戶操作行爲本地存儲的核心code，如果您要查看完整代碼，demo頁面[右鍵→查看源代碼]即可。
四、結語
有好東西不用幹嘛呢？總不能因爲一粒老鼠屎把一鍋紅燒肉都倒掉吧，總不能因爲某一個人犯了點事就把他九族都滅了吧。不是常說要擁抱變化，擁抱未來嗎？只有這樣，才能加速提升我們整個前端屆的向前發展，不至於總是滯後於國外N年……所以，我們要大膽進取，用於創新，在實際的項目中，積極應用CSS3或是HTML5的新特性，新技術。無論是你的個人喜好，還是確實對於項目有所幫助，積極do it！整個行業的發展就是你推動的！
感謝閱讀，歡迎交流。
原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1952