webstorage--html5的本地數(shù)據(jù)處理的使用方法？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)服務(wù)，網(wǎng)站設(shè)計，網(wǎng)站托管維護等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出成都創(chuàng)新互聯(lián)公司。

1.webStorage是什么？

webStorage是html5中用于本地化存儲的一種方式，而在之前呢我們是用cookie的存儲方式處理;

2.那它們之間的區(qū)別是什么？

Ⅰ.cookie存在的問題：

ⅰ.cookie需要向服務(wù)端發(fā)送一個請求，服務(wù)端返回一個cookieId，存儲用瀏覽器緩存里,需消耗一定的帶寬。[cookie會隨著每次HTTP請求頭信息一起發(fā)送，無形中增加了網(wǎng)絡(luò)流量];

ⅱ.cookie存儲的數(shù)據(jù)容量有限，根據(jù)瀏覽器類型不同而不同，IE6大約只能存儲2K;

Ⅱ.而webstorage只需把數(shù)據(jù)存儲于本地;

3.我們可以舉一個小例子說明一下

eg:輸入用戶名和密碼，點擊按鈕1時，把數(shù)據(jù)保存起來，點擊按鈕2，頁面刷新還可以獲取到；

過程：

ⅰ.創(chuàng)建一個事件

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. function MyClick1()   
   {   
   }

ⅱ.通過一個id獲取到它的用戶名

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. var
    username = $(
   "#TxtUserName"
   ).val();

ⅲ.通過一個id獲取到它的密碼

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. var
    pwd = $(
   "#TxtPwd"
   ).val();

ⅳ.用戶名和密碼獲取到之后，我們要怎么存數(shù)據(jù)呢？有兩種方式：

①. 第一種：sessionStorege,使用于Firefox2+的火狐瀏覽器;

生命周期：用這種方式存儲的數(shù)據(jù)僅窗口級別有效，同一個窗口（或者Tab）頁面刷新或者跳轉(zhuǎn)，都能獲取到本地存儲的數(shù)據(jù)，當(dāng)新開窗口或者頁面時，原來的數(shù)據(jù)就失效了[僅限當(dāng)前頁面]

缺點：IE不支持，不能實現(xiàn)數(shù)據(jù)的持久保存。

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. sessionStorage.setItem("k_username", username);            sessionStorage.setItem("k_pwd", pwd);

注：sessionStorage.setItem是通過鍵值對的方式存儲;

②.第二種方式:localStorage

localStorage是Web Storage互聯(lián)網(wǎng)存儲規(guī)范中的一部分，現(xiàn)在在Firefox 3.5、Safari 4和IE8中得到支持。

生命周期：存于本地C盤，瀏覽器關(guān)閉打開之后還有;

缺點：低版本瀏覽器不支持。

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. localStorage.setItem("k_username", username);   
              localStorage.setItem("k_pwd",pwd);

ⅴ.打印

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. alert("保存成功！");

ⅵ.按鈕2打印以上所有數(shù)據(jù)

第一種方式打?。?/p>

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. function MyClick2() {   
                   alert(sessionStorage.getItem("k_username"));   
                   alert(sessionStorage.getItem("k_pwd"));   
               }

第二種方式打印

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. function MyClick2() {   
               alert(localStorage.getItem("k_username"));   
               alert(localStorage.getItem("k_pwd"))   
              }

結(jié)果顯示:

ⅶ.擴展：localStorage的removeItem方法

//如果我想刪除它的用戶名怎么做呢？通過它的key把它刪除,這樣獲取時就為空

//localStorage.removeItem("k_username");

跟蹤本地數(shù)據(jù)情況:

結(jié)果顯示:

ⅷ.localStorage的clear方法

//如果我想把所有數(shù)據(jù)都清除？localStorage有個方法

localStorage.clear();

結(jié)果顯示:

代碼顯示：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. 
   
   
   
       
       
       
       
   
   
       
   
           
   
               
   用戶名:
               
   
                   
               
           
           
   
               
   密碼:
               
   
                   
               
           
           
   
               
   
                   
               
               
   
                   
               
           
       
   
   

4.webStorage制作簡易留言板[代碼為了展示效果所以把js就直接在html里面寫]

XML/HTML Code復(fù)制內(nèi)容到剪貼板

效果顯示:

關(guān)于webstorage--html5的本地數(shù)據(jù)處理的使用方法問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。