第8章---HTML-5本地存儲ppt課件(全)

1、8.1本地存儲Web Storage使用HTML5的Web Storage功能，可以在客戶端存儲更多的數(shù)據(jù)，而且可以實現(xiàn)數(shù)據(jù)在多個頁面中共享甚至是同步。cookie存儲數(shù)據(jù)的不足cookie可用于在程序間傳遞少量的數(shù)據(jù)，對于Web應(yīng)用來說，它是一個在服務(wù)器和客戶端之間來回傳送文本值的內(nèi)置機(jī)制，服務(wù)器可以根據(jù)cookie來追蹤用戶在不同頁面的訪問信息。正因其卓越的表現(xiàn)，在目前的Web應(yīng)用中，cookie得到了最為廣泛的應(yīng)用。使用Web Storage存儲的優(yōu)勢Web Storage可以在客戶端保存大量的數(shù)據(jù)，而且通過其提供的接口，訪問數(shù)據(jù)也非常方便。然而，Web Storage的誕生并不是為了替

2、代cookie，相反，是為了彌補cookie在本地存儲中表現(xiàn)的不足。本地存儲（localStorage）與會話存儲（sessionStorage）的區(qū)別Web Storage本地存儲包括sessionStorage（會話存儲）和localStorage（本地存儲。）熟悉Web編程的人員第一次接觸Web Storage時，會很自然地與session和cookie去對應(yīng)。不同的是，cookie和session完全是服務(wù)器端可以操作的數(shù)據(jù)，但是sessionStorage和localStorage則完全是瀏覽器客戶端操作的數(shù)據(jù)。檢查瀏覽器是否支持Web Storage在HTML5的各項特性中，Web

3、 Storage的瀏覽器支持度是比較好的。目前，所有的主流瀏覽器都在一定程度上支持Web Storage。因而，Web Storage成為Web應(yīng)用中最安全的API之一。實戰(zhàn)練習(xí)檢查瀏覽器是否支持Web Storage設(shè)置和獲取Storage數(shù)據(jù)sessionStorage和localStorage作為window的屬性，完全繼承Storage API，它們提供的操作數(shù)據(jù)的方法完全相同。實戰(zhàn)練習(xí)使用sessionStorage和localStorage8.2使用Web Storage了解了有關(guān)Web Storage的相關(guān)知識，接下來將向讀者介紹如何設(shè)置和獲取Storage數(shù)據(jù)、Web Stor

4、age的屬性、方法和事件等相關(guān)知識。最終文件：光盤最終文件第8章8-2-1.html視頻：光盤視頻第8章8-2-1.swf最終文件：光盤最終文件第8章8-2-2.html視頻：光盤視頻第8章8-2-2.swfStorage API的屬性和方法在上節(jié)中學(xué)習(xí)了如何使用setItem()方法存儲數(shù)據(jù)，使用getItem()方法獲取數(shù)據(jù)。這些方法都來源于它們所繼承的Storage API提供的方法。實戰(zhàn)練習(xí)使用Storage對象保存頁面內(nèi)容存儲JSON對象的數(shù)據(jù)雖然使用Web Storage可以保持任意的“鍵/值”對數(shù)據(jù)，但是一些瀏覽器把數(shù)據(jù)限定為字符串類型，而且對于一些復(fù)雜結(jié)構(gòu)的數(shù)據(jù)，管理起來比較混

5、亂。不過對于復(fù)雜結(jié)構(gòu)的數(shù)據(jù)，可以使用現(xiàn)代瀏覽器都支持的JSON對象來處理，這也為開發(fā)人員提供了一種可行的解決方案。實戰(zhàn)練習(xí)使用Storage對象存儲JOSN數(shù)據(jù)最終文件：光盤最終文件第8章8-2-3.html視頻：光盤視頻第8章8-2-3.swf最終文件：光盤最終文件第8章8-2-4.html視頻：光盤視頻第8章8-2-4.swfStorage API的事件有時候，會存在多個網(wǎng)頁或標(biāo)簽頁同時訪問存儲數(shù)據(jù)的情況。為保證修改的數(shù)據(jù)能夠及時反饋到另一個頁面，HTML 5的Web Storage內(nèi)建立一套事件通知機(jī)制，會在數(shù)據(jù)更新時觸發(fā)。無論監(jiān)聽的窗口是否存儲過該數(shù)據(jù)，只要與執(zhí)行存儲的窗口是同源的，都

6、會觸發(fā)Web Storage事件。8.3本地數(shù)據(jù)庫Web SQL為了進(jìn)一步加強客戶端的存儲能力，HTML 5引入了本地數(shù)據(jù)庫的概念。但HTML 5的數(shù)據(jù)庫API的具體細(xì)節(jié)仍在完善，其中Web SQL Database就是數(shù)據(jù)庫方案之一。實際上，Web SQL Database并不包含在HTML 5規(guī)范之中，它是一個獨立的規(guī)范，引入了使用SQL操作客戶端數(shù)據(jù)庫的API。最新版本的Chrome、Safari和Opera瀏覽器都已經(jīng)實現(xiàn)了它。了解Web SQL數(shù)據(jù)庫Web SQL Database的規(guī)范使用的是SQLite數(shù)據(jù)庫，它允許應(yīng)用程序通過一個異步的JavaScript接口訪問數(shù)據(jù)庫。雖然W

7、eb SQL 不屬于HTML 5規(guī)范，而且HTML 5最終也不會選擇它，但是對于移動領(lǐng)域是非常有用的，因為在任何情況下，SQL API在數(shù)據(jù)庫中的數(shù)據(jù)處理能力都是無法比擬的。Web SQL數(shù)據(jù)庫的基本操作打開數(shù)據(jù)庫openDatabase()方法可以打開一個已經(jīng)存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在，它可以創(chuàng)建數(shù)據(jù)庫。創(chuàng)建并打開數(shù)據(jù)庫的語法如下。var db = openDatabase(TestDB,1.0,測試數(shù)據(jù)庫,2*1024*1024, creation Callback);創(chuàng)建數(shù)據(jù)表transaction()方法可以進(jìn)行事務(wù)處理；executeSql()方法可以執(zhí)行SQL語句?？梢酝瑫r使用

8、這兩個方法，在事務(wù)中處理SQL語句。創(chuàng)建數(shù)據(jù)表的方法如下。db.transaction(function (tx)tx.executeSql(CREATE TABLE IF NOT EXISTS UserName(id unique,Name););添加數(shù)據(jù)至數(shù)據(jù)庫表與創(chuàng)建數(shù)據(jù)表一樣，也可以使用transaction()方法和executeSql()方法，僅僅是SQL語句不同。使用插入數(shù)據(jù)的SQL語句執(zhí)行數(shù)據(jù)的插入操作。讀取數(shù)據(jù)庫中的數(shù)據(jù)仍然使用transaction()方法和executeSql()方法，使用查詢SQL語句，并在executeSql()方法中添加匿名的回調(diào)處理函數(shù)。本章主要向讀者介紹了HTML 5中的本地存儲功能，包括HTML 5的Web Storage和Web SQL