資源描述：
《HTML5的數(shù)據(jù)存儲(chǔ)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、本章要求：第7章HTML5的數(shù)據(jù)存儲(chǔ)WebStorage的基本概念sessionStorage和localStorage兩者之間的區(qū)別sessionStorage和localStorage的使用方法使用sessionStorage和localStorage進(jìn)行復(fù)雜數(shù)據(jù)的存儲(chǔ)sessionStorage和localStorage進(jìn)行JavaScript對(duì)象的存儲(chǔ)使用transactoin方法進(jìn)行事務(wù)的處理主要內(nèi)容1.WebStorage2.WebSQL數(shù)據(jù)庫(kù)3.跨文檔消息通信4.綜合實(shí)例——簡(jiǎn)單的Web留
2、言本第7章HTML5的數(shù)據(jù)存儲(chǔ)7.1WebStorage7.1.1WebStorage簡(jiǎn)介7.1.2WebStorage的API7.1.3兩種不同存儲(chǔ)類型的實(shí)例——計(jì)數(shù)器7.1.4JSON對(duì)象的存數(shù)實(shí)例——用戶信息卡在HTML5中，除了Canvas元素之外，另一個(gè)新增的非常重要的功能是可以在客戶端本地保存數(shù)據(jù)的WebStorage功能。Web應(yīng)用的發(fā)展，使得客戶端存儲(chǔ)使用得也越來(lái)越多，而實(shí)現(xiàn)客戶端存儲(chǔ)的方式則是多種多樣。最簡(jiǎn)單而且兼容性最佳的方案是Cookie，但是作為真正的客戶端存儲(chǔ)，cookie還是
3、有些不足：大?。篶ookies的大小被限制在4KB。帶寬：cookies是隨HTTP事物一起發(fā)送的，因此會(huì)浪費(fèi)一部分發(fā)送cookies時(shí)使用的帶寬。復(fù)雜性：cookies操作起來(lái)比較麻煩；所有的信息要被拼到一個(gè)長(zhǎng)字符串里面。對(duì)cookies來(lái)說(shuō)，在相同的站點(diǎn)與多事務(wù)處理保持聯(lián)系不是很容易。在這種情況下，在HTML5中重新提供了一種在客戶端本地保存數(shù)據(jù)的功能，它就是WebStorage功能。WebStorage功能，顧名思義，就是在Web上存儲(chǔ)數(shù)據(jù)的功能，而這里的存儲(chǔ)，是針對(duì)客戶端本地而言的。它包含兩種不
4、同的存儲(chǔ)類型：SessionStorage和LocalStorage。不管是SessionStorage還是LocalStorage，它們都能支持在同域下存儲(chǔ)5MB數(shù)據(jù)，這相比cookies有著明顯的優(yōu)勢(shì)。sessionStorage將數(shù)據(jù)保存在session對(duì)象中。所謂session，是指用戶在瀏覽某個(gè)網(wǎng)站時(shí)，從進(jìn)入網(wǎng)站到瀏覽器關(guān)閉所經(jīng)過(guò)的這段時(shí)間，也就是用戶瀏覽這個(gè)網(wǎng)站所花費(fèi)的時(shí)間。Session對(duì)象可以用來(lái)保存在這段時(shí)間內(nèi)所要求保存在任何數(shù)據(jù)。localStorage將數(shù)據(jù)保存在客戶端本地的硬件設(shè)
5、備中，即使瀏覽器被關(guān)閉了，該數(shù)據(jù)仍然存在，下次打開瀏覽器訪問(wèn)網(wǎng)站時(shí)仍然可以繼續(xù)使用。這兩種不同的存儲(chǔ)類型區(qū)別在于，sessionStorage為臨時(shí)保存，而localStorage為永久保存。7.1.1WebStorage簡(jiǎn)介下面講解如何使用WebStorage的API，目前WebStorage的API有如下這些：Length：獲得當(dāng)前webstorage中的數(shù)目。key(n)：返回webstorage中的第N個(gè)存儲(chǔ)條目。getItem(key)：返回指定key的存儲(chǔ)內(nèi)容，如果不存在則返回null。注意
6、，返回的類型是String字符串類型。setItem(key,value)：設(shè)置指定key的內(nèi)容的值為value。removeItem(key)：根據(jù)指定的key，刪除鍵值為key的內(nèi)容。clear：清空webstorate的內(nèi)容?？梢钥吹?，webstorageAPI的操作機(jī)制實(shí)際上是對(duì)鍵值對(duì)進(jìn)行的操作。下面是一些相關(guān)的應(yīng)用：1．?dāng)?shù)據(jù)的存儲(chǔ)與獲取在localStorage中設(shè)置鍵值對(duì)數(shù)據(jù)可以應(yīng)用setItem()，代碼如下：localStorage.setItem("key","value);獲取數(shù)據(jù)可
7、以應(yīng)用getItem()，代碼如下;varval=localStorage.getItem("key");當(dāng)然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下：localStorage.key="value";varval=localStorage.key;7.1.2WebStorage的APIHTML5存儲(chǔ)是基于鍵值對(duì)（key/value）的形式存儲(chǔ)的，每個(gè)鍵值對(duì)稱為一個(gè)項(xiàng)（item）。存儲(chǔ)和檢索數(shù)據(jù)都是通過(guò)指定的鍵名，鍵名的類型是字符串類型。值可以
8、是包括字符串、布爾值、整數(shù)，或者浮點(diǎn)數(shù)在內(nèi)的任意JavaScript支持的類型。但是，最終數(shù)據(jù)是以字符串類型存儲(chǔ)的。調(diào)用結(jié)果是將字符串value設(shè)置到sessionStorage中，這些數(shù)據(jù)隨后可以通過(guò)鍵key獲取。調(diào)用setItem()時(shí)，如果指定的鍵名已經(jīng)存在，那么新傳入的數(shù)據(jù)會(huì)覆蓋原先的數(shù)據(jù)。調(diào)用getItem()時(shí)，如果傳入的鍵名不存在，那么會(huì)返回null，而不會(huì)拋出異常。2．?dāng)?shù)據(jù)的刪除和清空removeItem()用于從Stora
