HTML5 localStorage本地存儲實際應用舉例

HTML5 localStorage本地存儲實際應用舉例

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1952

1、引言

HTML5雖將來到其鼎盛時期，但這並不妨礙咱們在實際項目中漸進使用HTML5的一些特性。就我所作的項目而言，應用的HTML5相關特性有：data-自定義屬性、placeholder、以及email類型input文本框。上週新上線的會員中心，本身又應用了HTML5相關內容——HTML5 localStorage本地存儲，這裏簡單分享下，但願能觸動一下你們的小小神經。

2、實例展現

實際在線的頁面訪問，若是不是會員，還須要註冊。煩那！因此本身就把其高保真獨立出來，作了個HTML版本的demo頁面。

您能夠狠狠地點擊這裏：HTML5 localstorage本地存儲應用demo

進入demo頁面，您能夠看到左側一個高高的（若是你是首次進入）的垂直菜單欄，長相以下：

點擊次級標題欄（灰色漸變的標題欄）會有展開收起的動做。例如點擊首頁標題欄「訂單中心」，對應列表項收起，而後你刷新頁面，該列表項依舊處於收起狀態。以下圖：

3、實現探究

有意思！怎麼玩的呢？這裏賣個關子，先看看京東商城的作法。
咱們這裏的垂直菜單欄應該是參考京東商城我的中心的菜單欄設計的；京東的記錄用戶展開收起細則的作法是使用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頁面[右鍵→查看源代碼]便可。

4、結語

有好東西不用幹嗎呢？總不能由於一粒老鼠屎把一鍋紅燒肉都倒掉吧，總不能由於某一我的犯了點事就把他九族都滅了吧。不是常說要擁抱變化，擁抱將來嗎？只有這樣，才能加速提高咱們整個前端屆的向前發展，不至於老是滯後於國外N年……因此，咱們要大膽進取，用於創新，在實際的項目中，積極應用CSS3或是HTML5的新特性，新技術。不管是你的我的喜愛，仍是確實對於項目有所幫助，積極do it！整個行業的發展就是你推進的！

感謝閱讀，歡迎交流。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1952

（本篇完）