輕松實現localStorage本地存儲

相信大家都知道HTML5提供了localStorage和sessionStorage兩個新功能，基於這兩個功能我們可以實現web資源的離線和會話存儲，如果你現在還在用Cookie來臨時存儲網絡資源的話，那就太out了，有這么好的東西放着干嗎不用呢？

下面我將通過一個簡單的例子來闡述localStorage的用法，實現起來還是相對容易的。例如現在大部分網站都有記錄訪客第一次訪問的信息，如果是第一次訪問瀏覽器在界面上就會彈出一個廣告框之類的彈框，之后再訪問網站就看不到彈框了，這一效果其實就是用localStorage（之前用Cookie）實現的。

那么現在我們以bootstrap的模態框為例，當用戶第一次進入網站的時候彈出模態框，之后就不再彈出，除非用戶清除了瀏覽器的緩存數據。我們的html代碼如下：

<div class="modal hide fade" id="demo" data-show="true" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h1 class="modal-title text-center step-show1" id="startModalLabel"><span>彈框demo</span></h1>    
                </div>
                <div class="modal-body">
                    彈框內容
                </div>
           </div>
       </div>
</div>                                    

好了，我們已經輕松搭建好了一個漂亮的彈窗，默認是隱藏的，現在我們所要做的就是在訪客第一次訪問的時候顯示這個彈窗，接下來我們就來編寫JS代碼：

首先我們來記錄訪客第一次訪問的信息，如果是第一次訪問我們就賦予一個變量值為"1"，當訪客再次訪問的時候瀏覽器就會去尋找這個變量的值，如果為1則進行某操作，如果不為1則進行另一操作，代碼如下：

//本地存儲訪客是否第一次訪問
var strModel="value";     //定義存儲對象的屬性名
var storeDisplay=function(){
    var modelDisplay=1;      //定義存儲對象的屬性值
    //存儲，IE6~IE7 cookie 其他瀏覽器HTML5本地存儲
    if(window.localStorage) {
        localStorage.setItem(strModel,modelDisplay);  //進行本地存儲
    }
    else {
        Cookie.write(strModel,modelDisplay);   //進行Cookie存儲
    }
};

ok，我們的存儲代碼已經寫好了，接下來我們就要來觸發它了，調用上述storeDisplay()函數即可，同時因為有些低版本瀏覽器還不支持localStorage，所以觸發之前還要判斷下瀏覽器是否支持localStorage，不支持則使用Cookie存儲，實現全兼容。代碼如下：

//檢測觸發是否顯示彈窗
var strStoreDate=window.localStorage ? localStorage.getItem(strModel) : Cookie.read(strModel);      //檢測瀏覽器是否支持localStorage
 
if(strStoreDate!="1"){    //如果屬性值不為1則顯示彈框
     $('#demo').removeClass("hide");
     $('#demo').modal({
             show:true  //顯示彈框
     });
}

storeDisplay();  //存儲信息，將存儲屬性設置為"1"

這樣一來當訪客第一次訪問的時候strStoreDate的值其實為'undefinded'，不等於'1'，所以就會執行if里面的語句顯示彈框，然后再將存儲屬性設置為'1'，而當訪客第二次訪問時屬性值已經為'1'了就不會執行if里面的語句，彈框還是默認隱藏狀態，ok，完成。

通過上述例子我們利用localStorage輕松地實現了一個記錄訪客是否第一次訪問的功能，利用

　　localStorage.setItem(strModel,modelDisplay)

　　以及

　　localStorage.getItem(strModel)

　　來設置和獲取屬性值是最重要的步驟，

同樣的，如果我們需要使用sessionStorage來存儲訪客在當前會話中的信息只需將localStorage替換為sessionStorage即可，這樣我們刷新網頁的時候信息就不會丟失了。

怎么樣，是不是很強大？還沒用的童鞋趕緊試試吧！