HTML第9章-離線Web應用和Web存儲課件

1、第9章 離線Web應用和Web存儲離線Web應用1離線Web應用的實現(xiàn)2Web Storage的概述3Web Storage應用49.1 離線Web應用1、離線Web應用工作機制（1）客戶端瀏覽器中輸入要訪問頁面的URL地址，向該地址指向的Web服務器發(fā)出請求。（2）Web服務器根據(jù)瀏覽器送來的請求，將請求的文檔和所需資源返回給瀏覽器。（3）瀏覽器解析返回的文檔，處理或顯示從Web服務器返回的資源文件。如果支持離線Web應用，重點考察manifest緩存文件，該文件由html標記的manifest屬性指定。9.1離線Web應用2、離線Web應用優(yōu)點（1）離線瀏覽。用戶可以在離線時繼續(xù)使用Web

2、應用程序（2）提高用戶Web應用體驗。將資源緩存到本地，資源加載速度更快，縮短Web應用的響應時間。（3）減輕Web服務器的負載。瀏覽器只需要從Web服務器下載更新過或更改過的資源。 使用應用緩存實現(xiàn)離線Web應用中，需要在HTML文檔的標記中包含manifest屬性，并在其中指明manifest文件，該文件的擴展名應為建議為”.appcache”或” .manifest”。 manifest文件是一個文本文件，其中包含離線Web應用程序需要加載的文件列表。9.2 離線Web應用的實現(xiàn)HTML5離線Web應用的實現(xiàn)一是構(gòu)造合理的manifest文件，從而實現(xiàn)資源緩存；二是檢測在線狀態(tài)并實現(xiàn)緩存

3、更新。1、manifest文件(1)在線和離線Web應用的效果9.2 離線Web應用的實現(xiàn)示例9-2是使用了緩存文件的html文件。（1）第一次在線訪問Web服務器。9.2 離線Web應用的實現(xiàn)示例9-2是使用了緩存文件的html文件。（2）關(guān)閉xmapp的Apache服務器，離線訪問Web服務器（3）緩存被清空后，離線訪問Web服務器。9.2 離線Web應用的實現(xiàn)manifest文件解析manifest緩存文件是離線Web應用的關(guān)鍵，文件清單內(nèi)容的具體說明如下。 manifest文件第一行必須是CACHE MANIFEST，文件擴展名建議使用appcache，也可以使用manifest。 C

4、ACHE：指定需要緩存的文件，清單中列出的文件在首次訪問Web服務器進下載并緩存。 NETWORK：指定的文件需要與服務器連接才能獲取，不會被緩存。 *是文件通配符，代表除了在CACHE中指明的文外件，所有其他文件都不緩存，需要從Web服務器獲得。 FALLBACK：在此選項下列出的文件當頁面無法訪問時，使用備用的資源文件。 文件編碼必須是utf-8。實現(xiàn)應用緩存，需要在標記中定義manifest屬性，從而在網(wǎng)頁中引用manifest文件，例如： 9.2 離線Web應用的實現(xiàn)2、更新緩存(1)用戶更新緩存 可以手動清空緩存，然后再在線訪問Web服務器，這時頁面是會更新的。瀏覽器會在第一次訪問W

5、eb應用程序時將manifest文件中指定的文件下載并保存在本地緩存中。(2)調(diào)用Javascript接口更新緩存 HTML5的Application Cache API，除了可以實現(xiàn)離線資源緩存，也可以用其實現(xiàn)本地緩存更新。9.2 離線Web應用的實現(xiàn)示例9-3是更新緩存的一個典型示例。9.2 離線Web應用的實現(xiàn)3、檢測在線狀態(tài) 除了將服務器的資源緩存在本地外，離線Web應用還應該能夠在離線時將要提交給服務器的數(shù)據(jù)保存在本地，等在線時再將其同步到服務器。9.3 Web Storage概述1、Web Storage的概念 在Web應用中，有時會希望由Web頁面來記錄或處理一些信息，例如用戶登

6、錄狀態(tài)、計數(shù)器或者用戶需要和頁面頻繁交互的數(shù)據(jù)等。這時，可以不使用后臺數(shù)據(jù)庫，而是使用Web Storage技術(shù)將數(shù)據(jù)存儲在客戶端瀏覽器中。 Web Storage提供兩種方式將數(shù)據(jù)保存在客戶端：一種是localStorage，另一種是sessionStorage。localStorage被稱做本地存儲，將數(shù)據(jù)保存在客戶端本地；sessionStorage被稱為會話存儲，將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉后session對象消失。9.3 Web Storage概述1、Web Storage的概念表9-1 localStorag和sessionStorage的區(qū)別Web Storage類型

7、數(shù)據(jù)保存周期有效范圍localStorage數(shù)據(jù)保存在本地存儲（硬盤），網(wǎng)頁關(guān)閉后，數(shù)據(jù)仍然存在，執(zhí)行刪除命令后數(shù)據(jù)會消失。同一網(wǎng)站的網(wǎng)頁可以訪問sessionStorage數(shù)據(jù)臨時保存在session對象中，在網(wǎng)頁瀏覽期間存續(xù)，網(wǎng)頁關(guān)閉，數(shù)據(jù)丟失僅對當前瀏網(wǎng)頁可以訪問9.3 Web Storage概述2、Web Storage API、Web Storage的概念 在使用了localStorage或sessionStorage對象的文檔中，用戶可以通過window對象來獲取它們。除了數(shù)據(jù)的保存周期和有效范圍外，不管是sessionStorage，還是localStorage，可使用的API都

8、相同，其功能包括保存數(shù)據(jù)、讀取數(shù)據(jù)、刪除數(shù)據(jù)、得到索引的key值等。9.3 Web Storage概述2、Web Storage API、Web Storage的概念保存數(shù)據(jù)的setItem()方法 localStorage 和sessionStorage都使用setItem()方法用來保存數(shù)據(jù)，語法格式如下：localStorage.setItem(key, value)讀取數(shù)據(jù)的getItem()方法 localStorage和sessionStoragey使用getItem()方法用來讀取數(shù)據(jù)，語法格式如下：var value = localStorage.getItem(key);9.

9、3 Web Storage概述2、Web Storage API、Web Storage的概念刪除數(shù)據(jù)刪除數(shù)據(jù)分為刪除單個數(shù)據(jù)和刪除所有數(shù)據(jù)兩種。刪除單個數(shù)據(jù)時，需要指明刪除的key值，形式如下localStorage.removeItem(key); 刪除所有數(shù)據(jù)使用clear()方法，它能刪除存儲列表中的所有數(shù)據(jù)。語法格式如下：localStorage.clear(); 9.3 Web Storage概述2、Web Storage API、Web Storage的概念length屬性length屬性表示目前Storage對象中存儲的鍵值對的數(shù)量，length屬性主要用來遍歷localSto

10、rage或sessionStoragey中的所有對象。返回索引的key值 遍歷Storage對象時，需要使用key(index)方法允許獲取一個指定位置的鍵值。語法格式如下。localStorage.key(index); 9.4 Web Storage應用1 使用localStorage和sessionStorage的網(wǎng)頁計數(shù)器示例9-5實現(xiàn)一個簡單的網(wǎng)頁計數(shù)器9.4 Web Storage應用2使用localStorage保存、讀取和清除數(shù)據(jù)示例9-6使用了localStorage對象的各種方法9.4 Web Storage應用3 使用localStorage實現(xiàn)電話簿管理示例9-7使用localStorage對象實現(xiàn)了電話簿的增加、查找和顯示功能9.4 Web Storage應用3 4 使用JSON對象改進電話簿的功能示例9-7只實現(xiàn)了姓名和手機號碼2個字段的管理，如果要保存更為豐富的電話簿信息，比如公司、地址等，如何實現(xiàn)呢？Web Storage可以利用JSON的stringify()方法，將復雜對象轉(zhuǎn)變成字符串，存入Web Storage中；當從Web Storage中讀取時，可以通過