輕鬆實現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便可，這樣咱們刷新網頁的時候信息就不會丟失了。

怎麼樣，是否是很強大？還沒用的童鞋趕忙試試吧！