初識WebStorage

本講大綱：1、WebStorage是什么

支持網(wǎng)站：2、使用WebStorage中的API

3、sessionStorage和localStorage的實例——計數(shù)器

4、WebStorage綜合實例——留言本

5、JSON對象的存數(shù)實例——用戶信息卡

WebStorage是什么

WebStorage功能，顧名思義，就是在Web上存儲數(shù)據(jù)的功能，而這里的存儲，是針對客戶端本地而言的。它包含兩種不同的存儲類型：SessionStorage和LocalStorage。不管是SessionStorage還是LocalStorage，它們都能支持在同域下存儲5MB數(shù)據(jù).sessionStorage將數(shù)據(jù)保存在session對象中。所謂session，是指用戶在瀏覽某個網(wǎng)站時，從進(jìn)入網(wǎng)站到瀏覽器關(guān)閉所經(jīng)過的這段時間，也就是用戶瀏覽這個網(wǎng)站所花費的時間。Session對象可以用來保存在這段時間內(nèi)所要求保存在任何數(shù)據(jù)。localStorage將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備中，即使瀏覽器被關(guān)閉了，該數(shù)據(jù)仍然存在，下次打開瀏覽器訪問網(wǎng)站時仍然可以繼續(xù)使用.

這兩種不同的存儲類型區(qū)別在于，sessionStorage為臨時保存，而為永久保存使用WebStorage中的AP

下面我們講解如何使用WebStorage的API。目前WebStorage的API有如下這些：Length：獲得當(dāng)前webstorage中的數(shù)目。key(n)：返回webstorage中的第N個存儲條目。getItem(key)：返回指定key的存儲內(nèi)容，如果不存在則返回null。注意，返回的類型是String字符串類型。setItem(key,value)：設(shè)置指定key的內(nèi)容的值為value。removeItem(key)：根據(jù)指定的key，刪除鍵值為key的內(nèi)容。clear：清空webstorate的內(nèi)容。

數(shù)據(jù)的存儲與獲取

在localStorage中設(shè)置鍵值對數(shù)據(jù)可以應(yīng)用setItem()，代碼如下所示localStorage.setItem("key","value);獲取數(shù)據(jù)可以應(yīng)用getItem()，代碼如下所示;var

val=localStorage.getItem("key");當(dāng)然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下；localStorage.key="value";var

val=localStorage.key;HTML5存儲是基于鍵值對（key/value）的形式存儲的，每個鍵值對稱為一個項（item）存儲和檢索數(shù)據(jù)都是通過指定的鍵名，鍵名的類型是字符串類型。值可以是包括字符串、布爾值、整數(shù)，或者浮點數(shù)在內(nèi)的任意JavaScript支持的類型。但是，最終數(shù)據(jù)是以字符串類型存儲的。調(diào)用結(jié)果是將字符串value設(shè)置到sessionStorage中，這些數(shù)據(jù)隨后可以通過鍵key獲取。調(diào)用setItem()時，如果指定的鍵名已經(jīng)存在，那么新傳入的數(shù)據(jù)會覆蓋原先的數(shù)據(jù)。調(diào)用getItem()時，如果傳入的鍵名不存在，那么會返回null，而不會拋出異常。數(shù)據(jù)的刪除和清空

removeItem()用于從Storage列表刪除數(shù)據(jù)代碼如下：var

val=sessionStorage.removeItem(key);也可以通過傳入數(shù)據(jù)項的key從而刪除對應(yīng)的存儲數(shù)據(jù)代碼如下var

val=sessionStorage.removeItem(1);說明：數(shù)字1會被轉(zhuǎn)換為string，因為key的類型就是字符串。clear()方法用于清空整個列表的所有數(shù)據(jù)，代碼如下：sessionStorage.clear();同時可以通過使用length屬性獲取Storage中存儲的鍵值對的個數(shù)：var

val=sessionStorage.length;注意：removeItem可以清除給定的key所對應(yīng)的項，如果key不存在則“什么都不做”；clear會清除所有的項，如果列表本來就是空的就“什么都不做”.sessionStorage和localStorage的實例——計數(shù)器

例18.1

本例主要是通過sessionStorage和localStorage對頁面的訪問量進(jìn)行計數(shù)。當(dāng)在文本框內(nèi)輸入數(shù)據(jù)后，分別可以單擊“session保存”按鈕和“l(fā)ocal保存”按鈕對數(shù)據(jù)進(jìn)行保存，還可以通過“session讀取”按鈕和“l(fā)ocal讀取”按鈕對數(shù)據(jù)進(jìn)行讀取。但是兩種方法對數(shù)據(jù)的處理方式不一樣，使用sessionStorage方法時，如果關(guān)閉了瀏覽器，這個數(shù)據(jù)就丟失了下一次打開瀏覽器，點擊讀取數(shù)據(jù)按鈕時，讀取不到任何數(shù)據(jù)。使用localStorage方法時，即使瀏覽器關(guān)閉了，下次打開瀏覽器時仍然能夠讀取保存的數(shù)據(jù)。但是，數(shù)據(jù)保存是按不同的瀏覽器分別進(jìn)行的，也就是說，如果打開別的瀏覽器，是讀取不到在這個瀏覽器中保存的數(shù)據(jù)的.WebStorage綜合實例——留言本

例18.2

在本節(jié)中，來看一個簡單Web留言本的示例。使用一個多行文本框輸入數(shù)據(jù)，點擊按鈕時將文本框中的數(shù)據(jù)保存到localStorage中，在表單下部放置一個P元素來顯示保存后的數(shù)據(jù)。如果只保存文本框中內(nèi)容，并不能知道該內(nèi)容是什么時候?qū)懞玫模员４嬖搩?nèi)容的同時，也保存了當(dāng)前日期和時間，并將該日期和時間一并顯示在P元素中。利用WebStorage保存數(shù)據(jù)時，數(shù)據(jù)必須是“鍵名/鍵值”這樣的格式，所以將文本框的內(nèi)容作為鍵值，保存時的日期和時間作為鍵名來進(jìn)行保存，計算機中對于日期和時間的值是以時間戳的形式進(jìn)行管理的，所以保存時不可能存在重復(fù)的鍵名.JSON對象的存數(shù)實例——用戶信息卡

JSON是一種將對象與字符串可以相互表示的數(shù)據(jù)轉(zhuǎn)換標(biāo)準(zhǔn)。JSON一直是通過HTTP將對象從瀏覽器傳送到服務(wù)器一種常用格式。現(xiàn)在，可以通過序列化復(fù)雜對象將JSON數(shù)據(jù)保存在Storage中，以實現(xiàn)復(fù)雜數(shù)據(jù)類型的持久化。例18.3

下面是一個用戶信息卡的實例，在該實例中將用戶的信息使用JSON格式進(jìn)行