《HTML5網(wǎng)頁前端設計》教案第09章HTML5Web存儲API一、教學目標：了解Web存儲的概念；了解本地存儲與會話存儲方式的區(qū)別；熟悉Storage接口；掌握存儲、讀取、遍歷和刪除數(shù)據(jù)的方法。二、教學重點和難點：重點：存儲、讀取、遍歷和刪除數(shù)據(jù)的方法；難點：本地存儲與會話存儲方式在使用時的選擇。三、教學方法與手段：采取互動式教學方法，理論教學使用多媒體投影教室。四、課程簡介：本章主要介紹HTML5Web存儲API的功能與應用。HTML5存儲API包含了本地存儲（localStorage）與會話存儲（sessionStorage）兩種方式，其中l(wèi)ocalStorage可以實現(xiàn)客戶端數(shù)據(jù)的永久存儲，而sessionStorage只能在瀏覽器打開的時間段（又稱為一個session）中存儲數(shù)據(jù)，若瀏覽器關閉則數(shù)據(jù)全部消失。五、教學基本內(nèi)容：9.1Web存儲技術概述 9.1.1HTTPCookie存儲HTTPcookie由服務器端生成，將數(shù)據(jù)以“鍵-值”對(key-valuepairs)的形式發(fā)送給客戶端瀏覽器，瀏覽器將這些數(shù)據(jù)保存至指定目錄下的文本文件中，這樣在下一次訪問相同的網(wǎng)站時可以直接使用該cookie數(shù)據(jù)。HTTPcookie最早設計出來是用于處理單個事務，存在以下問題，因此不太適用于存儲大量數(shù)據(jù)：cookie的存儲數(shù)據(jù)量?。阂粋€cookie最多只能存放4096B左右的數(shù)據(jù)，并且部分瀏覽器對cookie有數(shù)量限制，比如Firefox、Opera等每個域名只能保存50個cookie。cookie請求限制：每次瀏覽器與服務器進行請求時，cookie都會存放在請求頭部傳輸?shù)椒掌鞫?。如果請求頭部的大小過大，就會導致服務器無法處理。 9.1.2HTML5Web存儲 HTML5Web存儲API和cookie存儲方式類似，也是將數(shù)據(jù)以“鍵-值”對(key-valuepairs)的形式持久存儲在Web客戶端。相比HTTPcookie而言，HTML5的Web存儲技術更適用于存儲大量數(shù)據(jù)，主流瀏覽器如Chrome、Firefox和Opera每個域名下可以存放5M的數(shù)據(jù)量，并且發(fā)生請求時不會帶上Web存儲的內(nèi)容。HTML5提供了兩種客戶端存儲數(shù)據(jù)的方法：本地存儲（localStorage）與會話存儲（sessionStorage）。localStorage方法存儲的數(shù)據(jù)沒有時間限制，永久保存，并且數(shù)據(jù)可以被不同的網(wǎng)頁頁面共享使用。sessionStorage主要是針對一個session會話的數(shù)據(jù)存儲，只能在創(chuàng)建session的網(wǎng)頁中使用，當用戶關閉瀏覽器窗口時，該數(shù)據(jù)將被刪除。9.2主流瀏覽器支持情況 HTML5Web存儲技術是HTML5中比較常用的一個特性，目前幾乎所有的主流瀏覽器都支持該技術。具體支持情況如表9-1所示。表9-SEQ表9-\*ARABIC1主流瀏覽器對HTML5Web存儲支持情況一覽瀏覽器EdgeFirefoxChromeSafariOpera支持情況8.0及以上3.0及以上3.0及以上4.0及以上10.5及以上由此可見，目前所有的主流瀏覽器都支持HTML5Web存儲技術。9.3HTML5Web存儲API的應用 9.3.1檢查瀏覽器支持情況檢查瀏覽器是否支持localStorage的相關JavaScript代碼如下：if(window.localStorage){//瀏覽器支持Web存儲中的localStorage}else{//瀏覽器不支持Web存儲中的localStorage}檢查瀏覽器是否支持sessionStorage的相關JavaScript代碼和localStorage類似：if(window.sessionStorage){//瀏覽器支持Web存儲中的sessionStorage}else{//瀏覽器不支持Web存儲中的sessionStorage} 9.3.2Storage接口在HTML5Web存儲API中，使用Storage接口實現(xiàn)本地存儲（localStorage）或會話存儲（sessionStorage）數(shù)據(jù)的添加、修改、查詢或刪除。如果希望使用localStorage，需要在JavaScript中聲明window.localStorage方法，也可以省略window.前綴，直接寫為localStorage；如果需要使用的是sessionStorage，同樣可以在JavaScript中聲明window.sessionStorage方法，或省略window.前綴，直接寫為sessionStorage。Storage接口中包含了只讀屬性length，該屬性返回值為整數(shù)形式，表示當前存儲對象中“鍵-值”對的總數(shù)量。Storage接口還包含一系列方法，用于獲取、添加、修改或刪除存儲數(shù)據(jù)。其中常用方法如表9-2所示。表9-SEQ表9-\*ARABIC2Storage接口的常用方法一覽方法名稱解釋key(n)用于返回數(shù)據(jù)中第n個值的名稱。如果n大于所有鍵值對的總數(shù)，則返回null值。getItem(key)用于返回指定鍵名稱的值，如果該名稱不存在，則返回null值。setItem(key,value)用于設置一條自定義的“鍵-值”對數(shù)據(jù)，如果該數(shù)據(jù)原先不存在，則會在存儲對象的鍵值對列表中新增該數(shù)據(jù)；如果該數(shù)據(jù)的鍵名稱原先存在，則看數(shù)據(jù)值是否有變化，如有變化則更新成最新值，否則不做任何操作。removeItem(key)用于刪除存儲對象中指定key名稱的數(shù)據(jù)，如果沒有則不做任何操作。clear()用于清空存儲對象中的鍵值對列表，如果原先就無任何數(shù)據(jù)則不做任何操作。 9.3.3localStoragevssessionStorage localStorage方法用于在客戶端永久存儲數(shù)據(jù)，該方法存儲的數(shù)據(jù)沒有過期時間，即使關閉了瀏覽器重新打開，數(shù)據(jù)也仍然保存在設備中可繼續(xù)使用。sessionStorage方法和localStorage方法的語法結構均類似，只不過sessionStorage方法有時間限制，只能用于在瀏覽器打開的時間段（又稱為一個session）中存儲數(shù)據(jù)，若瀏覽器關閉則數(shù)據(jù)全部消失9.3.4存儲數(shù)據(jù) 在Storage接口中提供的setItem()方法可以用于存儲數(shù)據(jù)。其語法結構如下：localStorage.setItem('key','value');或sessionStorage.setItem('key','value');數(shù)據(jù)是以“鍵-值”對的方式進行存儲的，每個數(shù)據(jù)值對應一個指定的鍵名稱進行索引。其中key換成需要存儲的鍵名稱（可自定義），value換成需要存儲的數(shù)據(jù)值。這里的引號可以是單引號或雙引號的任意一種。setItem()方法還可以被簡寫成另外兩種形式，由于localStorage和sessionStorage所使用的方法均來自于Storage接口，因此語法完全相同，可以根據(jù)存儲性質(zhì)選擇其中一種使用。以localStorage為例，簡寫代碼如下：localStorage['key']='value';或localStorage.key='value';例如，使用localStorage長期存儲用戶登錄時輸入的用戶名信息：localStorage.setItem('username','admin');上述代碼表示將值為admin的用戶名存在本地數(shù)據(jù)中，其中username是鍵名稱、admin是數(shù)據(jù)值。也可以直接使用鍵名稱代替setItem()方法實現(xiàn)數(shù)據(jù)存儲。例如，上述代碼可修改為：localStorage.username='admin';這種簡寫的方法中鍵名稱無需添加引號，而數(shù)據(jù)值與原先的寫法完全相同。如果存儲的數(shù)據(jù)值中帶有引號，則setItem()方法中鍵和值外邊的引號使用另一種形式，以避免重復沖突。例如：localStorage.setItem('name','Hisnameis"Wallace".');或localStorage.setItem("name","Hisnameis'Wallace'.");以上兩種寫法均可正確進行數(shù)據(jù)的存儲。在Google瀏覽器的調(diào)試模式中可以查看Web存儲的情況。正常打開Google瀏覽器并運行與Web存儲有關的HTML5頁面，然后按F12進入調(diào)試模式，點擊“Resource”選項卡，即可查看當前頁面的localStorage、sessionStorage和cookies等數(shù)據(jù)情況。Google瀏覽器的調(diào)試模式如圖9-2所示。圖9-SEQ圖9-\*ARABIC2Google瀏覽器調(diào)式模式下的數(shù)據(jù)存儲視圖由圖可見，在“Resource”選項卡中左側菜單欄包含了本地存儲、會話存儲、Cookies存儲等一系列數(shù)據(jù)存儲的情況。用戶根據(jù)點擊不同的選項欄目，可以查看指定的數(shù)據(jù)存儲信息。9.3.5讀取指定數(shù)據(jù) 在Storage接口中提供的getItem()方法可以用于獲取指定了鍵名稱的數(shù)據(jù)值。其語法結構如下：localStorage.getItem('name')或sessionStorage.getItem('name')這里的name需要替換成指定的鍵名稱。例如：varstudentID=localStorage.getItem('studentID');上述代碼表示從localStorage存儲的數(shù)據(jù)中讀取鍵名稱為studentID的數(shù)據(jù)值。如果該名稱并不存在，則直接返回null值。getItem()方法也可以省略，直接使用鍵名稱代替。簡寫如下：localS或sessionS讀取時，只要指定數(shù)據(jù)的鍵名稱即可找到對應的值。例如，之前獲取studentID的代碼可以改寫為：varstudentID=localStorage.studentID;簡寫后的內(nèi)容與之前的完整代碼作用完全相同。但是需要注意的是，使用鍵名稱代替getItem()方法的簡寫方式是在已知具體的鍵名稱時方可使用。如果是變量則不可使用簡寫方式。例如：varx='studentID';varstudentID=localStorage.x;上述方法等同于查找鍵名稱為x的數(shù)據(jù)值，與實際想要查找的鍵名稱studentID無關。9.3.6數(shù)據(jù)遍歷 如果需要讀取所有的數(shù)據(jù)，可以先使用Storage接口中l(wèi)ength屬性獲取數(shù)據(jù)的數(shù)目，如果返回值大于0就可以再使用key(n)方法依次獲取每一條數(shù)據(jù)的鍵名稱，然后根據(jù)鍵名稱進一步獲取到數(shù)據(jù)值。例如：//獲取使用localStorage存儲的數(shù)據(jù)總數(shù)varnum=localStorage.length;//進行存儲數(shù)據(jù)的遍歷for(vari=0;i<num;i++){//獲取鍵名稱varname=localStorage.key(i);//獲取鍵值varvalue=localStorage.getItem(name);

}9.3.7刪除指定數(shù)據(jù) 在Storage接口中提供的removeItem()方法可以用于刪除指定了鍵名稱的數(shù)據(jù)。其語法結構如下：localStorage.removeItem('name')或sessionStorage.removeItem('name')執(zhí)行removeItem()方法后數(shù)據(jù)可以被徹底刪除，包括數(shù)據(jù)的鍵名稱和對應的值。例如：localStorage.removeItem('test');上述代碼表示在localStorage存儲中刪除鍵名稱為test的數(shù)據(jù)值。如果提供的鍵名稱無法匹配到已存儲的數(shù)據(jù)信息，則本次不進行刪除操作。9.3.8清空所有數(shù)據(jù) 在Storage接口中提供的clear()方法可以用于清空所有Web存儲數(shù)據(jù)。其語法結構如下：localStorage.clear();或sessionStorage.clear();該方法不帶任何參數(shù)，直接調(diào)用clear()可以清空整個localStorage或sessionStorage對象中的所有數(shù)據(jù)。9.4實驗案例——網(wǎng)頁主題設置的設計與實現(xiàn)功能要求：使用Web存儲中的localStorage技術，可以把用戶對用網(wǎng)頁主題樣式的設置內(nèi)容永久存儲下來。本示例將實現(xiàn)一個網(wǎng)頁設置頁面，用戶可以自定義頁面的主題顏色與字體風格并將其存儲在localStorage中。重新加載該頁面時，會顯示上一次保存的樣式要求。9.5本章小結HTML5新增Web存儲API可以用于在客戶端保存數(shù)據(jù)。根據(jù)存儲時間不同，HTML5Web存儲API包含兩種存儲方式：localStorage和sessionStorage。其中l(wèi)ocalStorage適用于永久存儲數(shù)據(jù)，而sessionStorage只能維持在瀏覽器關閉前的數(shù)據(jù)狀態(tài)。HTML5拖放API中包含了Storage接口，該接口提供了對于Web存儲數(shù)據(jù)的添加、刪除、讀取、遍歷等一系列功能。 六、課后習題什么是HTML5Web存儲，它與傳統(tǒng)的cookie存儲方式相比有哪些不同？答：HTML5Web存儲API和cookie存儲方式類似，也是將數(shù)據(jù)以“鍵-值”對(key-valuepairs)的形式持久存儲在Web客戶端。相比HTTPcookie而言，HTML5的Web存儲技術更適用于存儲大量數(shù)據(jù)，其中IE每個域名下可以存放10M數(shù)據(jù)，而其他主流瀏覽器如Chrome、Firefox和Opera每個域名下也可以存放5M的數(shù)據(jù)量，并且發(fā)生請求時不會帶上Web存儲的內(nèi)容。HTML5Web存儲API中有哪兩種存儲方式，它們有什么不同？答：HTML5提供了兩種客戶端存儲數(shù)據(jù)的方法：本地存儲（localStorage）與