資源描述：
《第3講 html5規(guī)范的本地存儲》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在教育資源-天天文庫。
1、第3講HTML5規(guī)范的本地存儲廣州大學華軟軟件學院主要內(nèi)容概述localStoragesessionStorageStorage事件監(jiān)聽練習與習題1、概述1、概述--WebStorageWebStorage是HTML5中本地存儲的解決方案之一。在HTML5的WebStorage概念引入之前除去IEUserData、FlashCookie、GoogleGears等看名字就不靠譜的解決方案，瀏覽器兼容的本地存儲方案只有使用cookie。有同學可能會問，既然有了cookie本地存儲，為什么還要引入WebStorage的概念？Cookie（小餅干）有時也用其復數(shù)形式Co
2、okies，指某些網(wǎng)站為了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。Cookie是由服務器端生成，發(fā)送給User-Agent（一般是瀏覽器），瀏覽器會將Cookie的key/value保存到某個目錄下的文本文件內(nèi)，下次請求同一網(wǎng)站時就發(fā)送該Cookie給服務器（前提是瀏覽器設置為啟用cookie）。主要用途服務器可以利用Cookies包含信息的任意性來篩選并經(jīng)常性維護這些信息，以判斷在HTTP傳輸中的狀態(tài)。1、Cookies最典型的應用是判定注冊用戶是否已經(jīng)登錄網(wǎng)站。2、“購物車”之類處理。用戶可能會在一段時間內(nèi)在同一家網(wǎng)
3、站的不同頁面中選擇不同的商品，這些信息都會寫入Cookies，以便在最后付款時提取信息。Cookie腫么了缺陷:1.數(shù)據(jù)大?。鹤鳛榇鎯θ萜鳎琧ookie的大小限制在4KB左右,這是非?？拥?，尤其對于現(xiàn)在復雜的業(yè)務邏輯需求，4KB的容量除了存儲一些配置字段還簡單單值信息，對于絕大部分開發(fā)者來說真的不知指望什么了。2.安全性問題：由于在HTTP請求中的cookie是明文傳遞的（HTTPS不是），帶來的安全性問題還是很大的。3.網(wǎng)絡負擔：我們知道cookie會被附加在每個HTTP請求中，在HttpRequest和HttpResponse的header中都是要被傳輸?shù)?/p>
4、，所以無形中增加了一些不必要的流量損失。WebStorageWebStorage是HTML新增的本地存儲解決方案之一，但并不是為了取代cookie而制定的標準。cookie作為HTTP協(xié)議的一部分用來處理客戶端和服務器通信是不可或缺的，session正是依賴于實現(xiàn)的客戶端狀態(tài)保持。WebStorage的意圖在于解決本來不應該cookie做，卻不得不用cookie的本地存儲。WebStorageWebStorage提供兩種類型的API：localStorage和sessionStorage。區(qū)別：localStorage在本地永久性存儲數(shù)據(jù)，除非顯式將其刪除或清空
5、。sessionStorage存儲的數(shù)據(jù)只在會話期間有效，關閉瀏覽器則自動刪除。兩個對象都有共同的API。瀏覽器的支持檢查瀏覽器是否支持WebStorage-請打開ex3_1.html代碼示例主要內(nèi)容移動設備的支持localStoragesessionStorageStorage事件監(jiān)聽練習與習題Storage接口interfaceStorage{Storage接口readonlyattributeunsignedlonglength;DOMString?key(unsignedlongindex);getterDOMStringgetItem(DOMStrin
6、gkey);settercreatorvoidsetItem(DOMStringkey,DOMStringvalue);deletervoidremoveItem(DOMStringkey);voidclear();};length:唯一的屬性，只讀，用來獲取storage內(nèi)的鍵值對數(shù)量。key：根據(jù)index獲取storage的鍵名getItem：根據(jù)key獲取storage內(nèi)的對應valuesetItem：為storage內(nèi)添加鍵值對removeItem：根據(jù)鍵名，刪除鍵值對clear：清空storage對象localStorage和sessionStora
7、ge操作localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等localStorage和sessionStorage的方法：setItem存儲value用途：將value存儲到key字段用法：.setItem(key,value)代碼示例：sessionStorage.setItem("key","value");localStorage.setItem("site","js8.in");getItem獲取value用途：獲取指定key本地存儲的值用法：.getItem(key)代碼
8、如下:varvalue=
