第09章HTML5Web存儲API主講人：XX老師本章學習目標了解Web存儲的概念；了解本地存儲與會話存儲方式的區(qū)別；熟悉Storage接口；掌握存儲、讀取、遍歷和刪除數(shù)據的方法。目錄9.1Web存儲技術概述 9.2主流瀏覽器支持情況 9.3HTML5Web存儲API的應用 9.1.1HTTPCookie存儲9.1.2HTTP5Web存儲9.1Web存儲技術概述9.1.1HTTPCookie存儲HTTPcookie由服務器端生成，將數(shù)據以“鍵-值”對(key-valuepairs)的形式發(fā)送給客戶端瀏覽器，瀏覽器將這些數(shù)據保存至指定目錄下的文本文件中，這樣在下一次訪問相同的網站時可以直接使用該cookie數(shù)據。HTTPcookie技術保存的數(shù)據名稱和值都可以自定義，常見用于判斷用戶是否已登陸網站，或者保存購物車中等待付款的商品信息等。9.1.1HTTPCookie存儲HTTPcookie最早設計出來是用于處理單個事務，存在以下問題，因此不太適用于存儲大量數(shù)據：cookie的存儲數(shù)據量?。阂粋€cookie最多只能存放4096B左右的數(shù)據，并且部分瀏覽器對cookie有數(shù)量限制，比如Firefox、Opera等每個域名只能保存50個cookie。cookie請求限制：每次瀏覽器與服務器進行請求時，cookie都會存放在請求頭部傳輸?shù)椒掌鞫?。如果請求頭部的大小過大，就會導致服務器無法處理。9.1.2HTTP5Web存儲HTML5Web存儲API和cookie存儲方式類似，也是將數(shù)據以“鍵-值”對(key-valuepairs)的形式持久存儲在Web客戶端。相比HTTPcookie而言，HTML5的Web存儲技術更適用于存儲大量數(shù)據，主流瀏覽器如Chrome、Firefox和Opera每個域名下可以存放5M的數(shù)據量，并且發(fā)生請求時不會帶上Web存儲的內容。9.1.2HTTP5Web存儲HTML5提供了兩種客戶端存儲數(shù)據的方法：本地存儲（localStorage）與會話存儲（sessionStorage）。localStorage方法存儲的數(shù)據沒有時間限制，永久保存，并且數(shù)據可以被不同的網頁頁面共享使用。sessionStorage主要是針對一個session會話的數(shù)據存儲，只能在創(chuàng)建session的網頁中使用，當用戶關閉瀏覽器窗口時，該數(shù)據將被刪除。9.2

主流瀏覽器支持情況瀏覽器EdgeFirefoxChromeSafariOpera支持情況8.0及以上3.0及以上3.0及以上4.0及以上10.5及以上9.3HTML5Web存儲API的應用9.3.1檢查瀏覽器支持情況9.3.2Storage接口9.3.3localStoragevssessionStorage9.3.4存儲數(shù)據9.3HTML5Web存儲API的應用9.3.5讀取指定數(shù)據9.3.6數(shù)據遍歷9.3.7刪除指定數(shù)據9.3.8清空所有數(shù)據9.3.1檢查瀏覽器支持情況在使用Web存儲API之前，需要首先確認瀏覽器的支持情況。由于存儲的數(shù)據庫可以直接被HTMLDOM中的window對象訪問，故最簡單的檢測方法是使用JavaScript代碼分別檢查window.localStorage或windows.sessionStorage是否存在。如果不存在，則說明瀏覽器不支持Web存儲API。9.3.1檢查瀏覽器支持情況檢查瀏覽器是否支持localStorage的相關JavaScript代碼如下：if(window.localStorage){//瀏覽器支持Web存儲中的localStorage}else{//瀏覽器不支持Web存儲中的localStorage}9.3.1檢查瀏覽器支持情況檢查瀏覽器是否支持sessionStorage的相關JavaScript代碼和localStorage類似：if(window.sessionStorage){//瀏覽器支持Web存儲中的sessionStorage}else{//瀏覽器不支持Web存儲中的sessionStorage}9.3.1檢查瀏覽器支持情況【例9-1】檢測瀏覽器對HTML5Web存儲的支持情況

9.3.2Storage接口在HTML5Web存儲API中，使用Storage接口實現(xiàn)本地存儲（localStorage）或會話存儲（sessionStorage）數(shù)據的添加、修改、查詢或刪除。9.3.2Storage接口如果希望使用localStorage，需要在JavaScript中聲明window.localStorage方法，也可以省略window.前綴，直接寫為localStorage；如果需要使用的是sessionStorage，同樣可以在JavaScript中聲明window.sessionStorage方法，或省略window.前綴，直接寫為sessionStorage。9.3.2Storage接口Storage接口中包含了只讀屬性length，該屬性返回值為整數(shù)形式，表示當前存儲對象中“鍵-值”對的總數(shù)量。9.3.2Storage接口方法名稱解釋key(n)用于返回數(shù)據中第n個值的名稱。如果n大于所有鍵值對的總數(shù)，則返回null值。getItem(key)用于返回指定鍵名稱的值，如果該名稱不存在，則返回null值。setItem(key,value)用于設置一條自定義的“鍵-值”對數(shù)據，如果該數(shù)據原先不存在，則會在存儲對象的鍵值對列表中新增該數(shù)據；如果該數(shù)據的鍵名稱原先存在，則看數(shù)據值是否有變化，如有變化則更新成最新值，否則不做任何操作。removeItem(key)用于刪除存儲對象中指定key名稱的數(shù)據，如果沒有則不做任何操作。clear()用于清空存儲對象中的鍵值對列表，如果原先就無任何數(shù)據則不做任何操作。Storage接口的常用方法一覽9.3.3localStoragevssessionStorage9.3.3localStoragevssessionStoragelocalStorage方法用于在客戶端永久存儲數(shù)據，該方法存儲的數(shù)據沒有過期時間，即使關閉了瀏覽器重新打開，數(shù)據也仍然保存在設備中可繼續(xù)使用。sessionStorage方法和localStorage方法的語法結構均類似，只不過sessionStorage方法有時間限制，只能用于在瀏覽器打開的時間段（又稱為一個session）中存儲數(shù)據，若瀏覽器關閉則數(shù)據全部消失。9.3.4存儲數(shù)據數(shù)據是以“鍵-值”對的方式進行存儲的，每個數(shù)據值對應一個指定的鍵名稱進行索引。9.3.4存儲數(shù)據在Storage接口中提供的setItem()方法可以用于存儲數(shù)據。其語法結構如下：localStorage.setItem('key','value');或sessionStorage.setItem('key','value');其中key換成需要存儲的鍵名稱（可自定義），value換成需要存儲的數(shù)據值。這里的引號可以是單引號或雙引號的任意一種。9.3.4存儲數(shù)據setItem()方法還可以被簡寫成另外兩種形式：localStorage['key']='value';或localStorage.key='value';由于localStorage和sessionStorage所使用的方法均來自于Storage接口，因此語法完全相同，可以根據存儲性質選擇其中一種使用。9.3.4存儲數(shù)據如果存儲的數(shù)據值中帶有引號，則setItem()方法中鍵和值外邊的引號使用另一種形式，以避免重復沖突。例如：localStorage.setItem('name','Hisnameis"Wallace".');或localStorage.setItem("name","Hisnameis'Wallace'.");9.3.4存儲數(shù)據在Google瀏覽器的調試模式中可以查看Web存儲的情況。正常打開Google瀏覽器并運行與Web存儲有關的HTML5頁面，然后按F12進入調試模式，點擊“Resource”選項卡，即可查看當前頁面的localStorage、sessionStorage和cookies等數(shù)據情況。9.3.4存儲數(shù)據【例9-2】HTML5Web存儲API之數(shù)據存儲的簡單應用

9.3.5讀取指定數(shù)據在Storage接口中提供的getItem()方法可以用于獲取指定了鍵名稱的數(shù)據值。9.3.5讀取指定數(shù)據在Storage接口中提供的getItem()方法可以用于獲取指定了鍵名稱的數(shù)據值。其語法結構如下：localStorage.getItem('name')或sessionStorage.getItem('name')9.3.5讀取指定數(shù)據例如：varstudentID=localStorage.getItem('studentID');上述代碼表示從localStorage存儲的數(shù)據中讀取鍵名稱為studentID的數(shù)據值。如果該名稱并不存在，則直接返回null值。9.3.5讀取指定數(shù)據getItem()方法也可以省略，直接使用鍵名稱代替。簡寫如下：localS或sessionS9.3.5讀取指定數(shù)據例如，之前獲取studentID的代碼可以改寫為：varstudentID=localStorage.studentID;簡寫后的內容與之前的完整代碼作用完全相同。9.3.5讀取指定數(shù)據但是需要注意的是，使用鍵名稱代替getItem()方法的簡寫方式是在已知具體的鍵名稱時方可使用。如果是變量則不可使用簡寫方式。例如：varx='studentID';varstudentID=localStorage.x;上述方法等同于查找鍵名稱為x的數(shù)據值，與實際想要查找的鍵名稱studentID無關。9.3.5讀取指定數(shù)據【例9-3】存儲和讀取用戶訪問頁面次數(shù)

9.3.6數(shù)據遍歷如果需要讀取所有的數(shù)據，可以先使用Storage接口中l(wèi)ength屬性獲取數(shù)據的數(shù)目，如果返回值大于0就可以再使用key(n)方法依次獲取每一條數(shù)據的鍵名稱，然后根據鍵名稱進一步獲取到數(shù)據值。9.3.6數(shù)據遍歷例如：//獲取使用localStorage存儲的數(shù)據總數(shù)varnum=localStorage.length;//進行存儲數(shù)據的遍歷for(vari=0;i<num;i++){//獲取鍵名稱varname=localStorage.key(i);//獲取鍵值varvalue=localStorage.getItem(name);

}9.3.6數(shù)據遍歷【例9-4】HTML5Web存儲之數(shù)據遍歷

9.3.7刪除指定數(shù)據在Storage接口中提供的removeItem()方法可以用于刪除指定了鍵名稱的數(shù)據。9.3.7刪除指定數(shù)據removeItem()方法的語法結構如下：localStorage.removeItem('name')或sessionStorage.removeItem('name')9.3.7刪除指定數(shù)據執(zhí)行removeItem()方法后數(shù)據可以被徹底刪除，包括數(shù)據的鍵名稱和對應的值。例如：localStorage.removeItem('test');上述代碼表示在localStorage存儲中刪除鍵名稱為test的數(shù)據值。如果提供的鍵名稱無法匹配到已存儲的數(shù)據信息，則本次不進行刪除操作。9.3.7刪除指定數(shù)據【例9-5】HTML5Web存儲之刪除指定數(shù)據

9.3.8清空所有數(shù)據在Storage接口中提供的clear()方法可以用于清空所有Web存儲數(shù)據。9.3.8清空所有數(shù)據clear()方法的語法結構如下：localStorage.clear();或sessionStorage.clear();該方法不帶任何參數(shù)，直接調用