chap16本地存儲(chǔ)與離線應(yīng)用

1、第16章 本地存儲(chǔ)與離線應(yīng)用1主要內(nèi)容概述localStorage和sessionStorage留言板示例Storage事件監(jiān)聽(tīng)練習(xí)與習(xí)題21、概述31、概述-WebStorage有同學(xué)可能會(huì)問(wèn)，既然有了cookie本地存儲(chǔ)，為什么還要引入WebStorage的概念？41、概述HTML4的本地?cái)?shù)據(jù)存儲(chǔ)方式 會(huì)話（Session）跟蹤是Web程序中常用的技術(shù)，用來(lái)跟蹤用戶的整個(gè)會(huì)話在傳統(tǒng)的Web程序中，通常使用Cookie和Session來(lái)存儲(chǔ)本地?cái)?shù)據(jù)。Cookie通過(guò)在客戶端記錄信息確定用戶身份，Session通過(guò)在服務(wù)器端記錄信息確定用戶身份。5Cookie（小餅干）有時(shí)也用其復(fù)數(shù)形式Coo

2、kies，指某些網(wǎng)站為了辨別用戶身份、進(jìn)行session跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。Cookie是由服務(wù)器端生成，發(fā)送給User-Agent（一般是瀏覽器），瀏覽器會(huì)將Cookie的key/value保存到某個(gè)目錄下的文本文件內(nèi)，下次請(qǐng)求同一網(wǎng)站時(shí)就發(fā)送該Cookie給服務(wù)器（前提是瀏覽器設(shè)置為啟用cookie）。服務(wù)器檢查該Cookie，以此來(lái)辨認(rèn)用戶狀態(tài)。服務(wù)器還可以根據(jù)需要修改Cookie的內(nèi)容。6Cookie工作原理7Session工作原理8主要用途服務(wù)器可以利用Cookies包含信息的任意性來(lái)篩選并經(jīng)常性維護(hù)這些信息，以判斷在HTTP傳輸中的狀態(tài)。1、Cooki

3、es最典型的應(yīng)用是判定注冊(cè)用戶是否已經(jīng)登錄網(wǎng)站。2、“購(gòu)物車(chē)”之類(lèi)處理。用戶可能會(huì)在一段時(shí)間內(nèi)在同一家網(wǎng)站的不同頁(yè)面中選擇不同的商品，這些信息都會(huì)寫(xiě)入Cookies，以便在最后付款時(shí)提取信息。9Cookie缺陷1. 數(shù)據(jù)大?。鹤鳛榇鎯?chǔ)容器，cookie的大小限制在4KB左右,這是非?？拥模绕鋵?duì)于現(xiàn)在復(fù)雜的業(yè)務(wù)邏輯需求，4KB的容量除了存儲(chǔ)一些配置字段還簡(jiǎn)單單值信息，對(duì)于絕大部分開(kāi)發(fā)者來(lái)說(shuō)真的不知指望什么了。2. 安全性問(wèn)題：由于在HTTP請(qǐng)求中的cookie是明文傳遞的（HTTPS不是），帶來(lái)的安全性問(wèn)題還是很大的。當(dāng)多人共用一臺(tái)計(jì)算機(jī)時(shí)使用Cookie可能會(huì)泄露用戶隱私，也帶來(lái)安全問(wèn)題3

4、. 網(wǎng)絡(luò)負(fù)擔(dān)：我們知道cookie會(huì)被附加在每個(gè)HTTP請(qǐng)求中，在HttpRequest 和HttpResponse的header中都是要被傳輸?shù)?，所以無(wú)形中增加了一些不必要的流量損失。10WebStorageWebStorage是HTML新增的本地存儲(chǔ)解決方案之一，但并不是為了取代cookie而制定的標(biāo)準(zhǔn)。cookie作為HTTP協(xié)議的一部分用來(lái)處理客戶端和服務(wù)器通信是不可或缺的，session正是依賴于實(shí)現(xiàn)的客戶端狀態(tài)保持。WebStorage的意圖在于解決本來(lái)不應(yīng)該cookie做，卻不得不用cookie的本地存儲(chǔ)。11WebStorageWebStorage功能，就是在Web上存儲(chǔ)數(shù)據(jù)，

5、提供兩種類(lèi)型的API：localStorage和sessionStorage。區(qū)別：localStorage在本地永久性存儲(chǔ)數(shù)據(jù)，除非顯式將其刪除或清空。sessionStorage存儲(chǔ)的數(shù)據(jù)只在會(huì)話期間有效，關(guān)閉瀏覽器則自動(dòng)刪除。兩個(gè)對(duì)象都有共同的API。12瀏覽器的支持13檢查瀏覽器是否支持WebStorage-請(qǐng)打開(kāi)ex3_1.html檢測(cè)瀏覽器是否支持14Storage 接口interface Storage Storage 接口 readonly attribute unsigned long length; DOMString? key(unsigned long index);

6、getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear();length:唯一的屬性，只讀，用來(lái)獲取storage內(nèi)的鍵值對(duì)數(shù)量。key：根據(jù)index獲取storage的鍵名getItem：根據(jù)key獲取storage內(nèi)的對(duì)應(yīng)valuesetItem：為storage內(nèi)添加鍵值對(duì)removeItem：根據(jù)鍵名，刪除鍵值對(duì)clear：清空stora

7、ge對(duì)象15localStorage和sessionStorage操作localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等localStorage和sessionStorage的方法：setItem 存儲(chǔ)value 用途：將value存儲(chǔ)到key字段 用法：.setItem( key, value) 代碼示例： sessionStorage.setItem(key, value); localStorage.setItem(site, js8.in);16也可以通過(guò)localStorage.和localStora

8、ge的形式訪問(wèn)localstorage數(shù)據(jù)。例如，下面3條語(yǔ)句都可以在localstorage中存儲(chǔ)鍵名為key、值為value的數(shù)據(jù)：localStorage.setItem(key, value);localStorage.key = value;localStoragekey = value;注：保存時(shí)，不允許重復(fù)保存相同的鍵名，保存后可以修改鍵值，但不允許修改鍵名localStorage和sessionStorage操作17getItem獲取value用途：獲取指定key本地存儲(chǔ)的值用法：.getItem(key)代碼如下:var value = sessionStorage.getI

9、tem(key); var site = localStorage.getItem(site);localStorage和sessionStorage操作18也可以通過(guò)localStorage.和localStorage的形式訪問(wèn)localstorage數(shù)據(jù)。例如，下面3條語(yǔ)句都可以獲取localstorage中存儲(chǔ)的鍵名為key的數(shù)據(jù)值到變量value中：var value = localStorage.getItem(key);var value = localStorage.key;var value = localStoragekey;localStorage和sessionStora

10、ge操作1920removeItem刪除指定key用途：刪除指定key本地存儲(chǔ)的值用法：.removeItem(key)代碼示例：sessionStorage.removeItem(key); localStorage.removeItem(site);localStorage和sessionStorage操作21clear清除所有的key/value用途：清除所有的key/value用法：.clear()代碼示例：sessionStorage.clear(); localStorage.clear();localStorage和sessionStorage操作22232、簡(jiǎn)單Web留言本如果

11、要保存的數(shù)據(jù)量比較大的話，使用上述方法會(huì)比較麻煩簡(jiǎn)單Web留言本示例，要求：使用一個(gè)多行文本框來(lái)輸入數(shù)據(jù)點(diǎn)擊按鈕時(shí)將文本框中的數(shù)據(jù)保存到localStorage中在表單下部放置一個(gè)table元素來(lái)顯示保存后的數(shù)據(jù)保存內(nèi)容時(shí)，同時(shí)保存當(dāng)前日期和時(shí)間，并將該日期和時(shí)間一并顯示在p元素中24示例：253、作為簡(jiǎn)易數(shù)據(jù)庫(kù)使用如果想要將WebStorage作為數(shù)據(jù)庫(kù)來(lái)使用的話，需要考慮幾個(gè)問(wèn)題：數(shù)據(jù)庫(kù)中的表都分為幾列，怎樣實(shí)現(xiàn)對(duì)列的管理怎樣實(shí)現(xiàn)數(shù)據(jù)的檢索功能實(shí)現(xiàn)對(duì)列的管理，可以使用JSON格式（JavaScript object Notation，是將JavaScript中的對(duì)象作為文本形式來(lái)保存時(shí)使用

12、的一種格式），獲取對(duì)象時(shí)再通過(guò)JSON格式獲取 JSON是一種將對(duì)象與字符串可以相互表示的數(shù)據(jù)轉(zhuǎn)換標(biāo)準(zhǔn)JSON.parse:將JavaScript對(duì)象表示法的JSON字符串轉(zhuǎn)換為對(duì)象(字符串轉(zhuǎn)對(duì)象)JSON.stringify:JavaScript json對(duì)象轉(zhuǎn)換為JavaScript對(duì)象表示法的JSON字符串(對(duì)象轉(zhuǎn)為字符串)26示例：客戶信息管理網(wǎng)頁(yè)客戶的信息分為：姓名、E-Mail地址、電話號(hào)碼、備注，需要把它們保存在localStorage中，如果輸入用戶姓名，可以進(jìn)行檢索并獲取該客戶的所有信息2728小結(jié)：為什么比cookie好1. 從容量上講WebStorage一般瀏覽器提供5M

13、的存儲(chǔ)空間，用來(lái)存儲(chǔ)視頻、圖片神馬的不夠，但對(duì)于絕大部分操作足矣2.安全性上WebStorage并不作為HTTP header發(fā)送的瀏覽器，所以相對(duì)安全3.從流量上講，因?yàn)閃ebStorage不傳送到服務(wù)器，所以不必要的流量可以節(jié)省，這樣對(duì)于高頻次訪問(wèn)或者針對(duì)手機(jī)移動(dòng)設(shè)備的網(wǎng)頁(yè)還是很不錯(cuò)的。29這并不意味著WebStorage可以取代cookie，而是有了WebStorage后cookie能只做它應(yīng)該做的事情了作為客戶端與服務(wù)器交互的通道，保持客戶端狀態(tài)。所以僅僅作為本地存儲(chǔ)解決方案WebStorage是優(yōu)于cookie的。302.5 storage事件 HTML5提供一個(gè)storage事件，

14、當(dāng)setItem()、removeItem()或者clear()方法被調(diào)用，并且數(shù)據(jù)真的發(fā)生了改變時(shí)，storage事件就會(huì)被觸發(fā)。注意，只有數(shù)據(jù)真的發(fā)生了變化，才會(huì)觸發(fā)storage事件。也就是說(shuō)，如果當(dāng)前的存儲(chǔ)區(qū)域是空的，調(diào)用clear()是不會(huì)觸發(fā)事件的?；蛘咄ㄟ^(guò)setItem()來(lái)設(shè)置一個(gè)與現(xiàn)有值相同的值，storage事件也是不會(huì)被觸發(fā)的torage事件的。312.5 storage事件 Event對(duì)象包含如下屬性： storageArea，表示存儲(chǔ)類(lèi)型（localstorage或sessionstorage）； key，發(fā)生改變的項(xiàng)的key oldValue，發(fā)生改變的項(xiàng)的原值 n

15、ewValue，發(fā)生改變的項(xiàng)的新值 url， key改變發(fā)生的URL3233二、本地?cái)?shù)據(jù)庫(kù)在HTML5中，大大豐富了客戶端本地可以存儲(chǔ)的內(nèi)容，添加了很多功能來(lái)將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶端本地，從而大大提高了Web應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān)，使Web時(shí)代重新回到了“客戶端為重，服務(wù)器端為輕”的時(shí)代數(shù)據(jù)庫(kù)的本地存儲(chǔ)功能就是其中的代表HTML4中，數(shù)據(jù)庫(kù)只能放在服務(wù)器端，只能通過(guò)服務(wù)器來(lái)訪問(wèn)數(shù)據(jù)庫(kù)，但是在HTML5中，可以像訪問(wèn)本地文件那樣輕松的對(duì)內(nèi)置數(shù)據(jù)庫(kù)進(jìn)行直接訪問(wèn)了341、SQLite數(shù)據(jù)庫(kù)SQLite，是一款輕型的關(guān)系數(shù)據(jù)庫(kù)，設(shè)計(jì)目標(biāo)是嵌入式系統(tǒng)，目前已經(jīng)在很多

16、嵌入式產(chǎn)品中使用了它它占用資源非常低，在嵌入式設(shè)備中，可能只需要幾百K的內(nèi)存就夠了。它能夠支持Windows/Linux/Unix等等主流的操作系統(tǒng)，同時(shí)能夠跟很多程序語(yǔ)言相結(jié)合，比如 C#、PHP、Java等比起Mysql、PostgreSQL這兩款開(kāi)源世界著名的數(shù)據(jù)庫(kù)管理系統(tǒng)來(lái)講，它的處理速度比他們都快。不像常見(jiàn)的客戶-服務(wù)器范例，SQLite引擎不是個(gè)程序與之通信的獨(dú)立進(jìn)程，而是連接到程序中成為它的一個(gè)主要部分。所以主要的通信協(xié)議是在編程語(yǔ)言內(nèi)的直接API調(diào)用。這在消耗總量、延遲時(shí)間和整體簡(jiǎn)單性上有積極的作用。整個(gè)數(shù)據(jù)庫(kù)(定義、表、索引和數(shù)據(jù)本身)都在宿主主機(jī)上存儲(chǔ)在一個(gè)單一的文件中。它

17、的簡(jiǎn)單的設(shè)計(jì)是通過(guò)在開(kāi)始一個(gè)事務(wù)的時(shí)候鎖定整個(gè)數(shù)據(jù)文件而完成的。352、SQLite數(shù)據(jù)庫(kù)的使用要使用SQLite，有兩個(gè)不要的步驟：創(chuàng)建訪問(wèn)數(shù)據(jù)庫(kù)的對(duì)象使用事務(wù)處理使用openDatabase方法創(chuàng)建訪問(wèn)數(shù)據(jù)庫(kù)的對(duì)象，該方法返回創(chuàng)建后的數(shù)據(jù)庫(kù)對(duì)象，如果不存在，則創(chuàng)建1、數(shù)據(jù)庫(kù)名稱(chēng)。 2、版本號(hào) 目前為1.0。3、對(duì)數(shù)據(jù)庫(kù)的描述。 4、設(shè)置數(shù)據(jù)的大小。5、回調(diào)函數(shù)(可省略)。36實(shí)際訪問(wèn)數(shù)據(jù)庫(kù)的時(shí)候，還需要調(diào)用transaction方法，用來(lái)執(zhí)行事務(wù)處理transaction可以防止在對(duì)數(shù)據(jù)庫(kù)進(jìn)行訪問(wèn)及執(zhí)行有關(guān)操作的時(shí)候受到外界打擾transaction對(duì)象的executeSql方法：tran

18、saction.executeSql(sqlquery, ,dataHandler,errorHandle);在executeSql方法中，將SQL語(yǔ)句中所要用到的參數(shù)先用“？”代替，然后將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中(“update stu set age=?where name=？;”,age,name);第三個(gè)參數(shù)為執(zhí)行sql語(yǔ)句成功時(shí)調(diào)用的回調(diào)函數(shù)function dataHandler（transaction，results）第二個(gè)參數(shù)為執(zhí)行查詢操作時(shí)返回的查詢到的結(jié)果集對(duì)象第四個(gè)參數(shù)為執(zhí)行sql語(yǔ)句出差時(shí)調(diào)用的回調(diào)函數(shù)function errorHandler（transact

19、ion，errmsg）第二個(gè)參數(shù)為執(zhí)行發(fā)生錯(cuò)誤時(shí)的錯(cuò)誤文字信息37二、離線存儲(chǔ)HTML5離線存儲(chǔ)功能非常強(qiáng)大，它的作用是：在用戶沒(méi)有與因特網(wǎng)連接時(shí)，照樣可以訪問(wèn)站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，自動(dòng)更新緩存數(shù)據(jù)。在頁(yè)面中的數(shù)據(jù)加載時(shí)，你可以自己設(shè)定一些要緩存的圖片、flash、css、js、html等文件，等下次不能聯(lián)網(wǎng)的情況下，你可以用那些緩存的文件。這就是HTML5的離線應(yīng)用。38應(yīng)用程序緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)： 離線瀏覽 用戶可在應(yīng)用離線時(shí)使用它們速度 已緩存資源加載得更快減少服務(wù)器負(fù)載 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。39 第一步、添加 HTML5 doctype第一件要做

20、的事情是創(chuàng)建一個(gè)符合規(guī)范的 HTML5 文檔。HTML5 doctype 相比于 xhtml 版本的 doctype 而言，要簡(jiǎn)單明了得多：40第二步：配置mime類(lèi)型需要服務(wù)器。這里用tomcat服務(wù)器來(lái)講解。首先要先把以manifest為后綴的文件的mime類(lèi)型配置為text/cache-manifest。一講到tomcat配置，熟悉的自然就會(huì)想到web.xml這個(gè)文件，在Tomcat安裝目錄下conf子目錄的web.xml文件中加入如下配置就行： manifest text/cache-manifest 41第三步：創(chuàng)建 manifest 文件新建一個(gè)文本文檔并另存名為 *.manife

21、stcache manifest 文件需要遵循的格式1.首行必須是 CACHE MANIFEST。2.其后，每一行列出一個(gè)需要緩存的資源文件名。3.可根據(jù)需要列出在線訪問(wèn)的白名單。白名單中的所有資源不會(huì)被緩存，在使用時(shí)將直接在線訪問(wèn)。聲明白名單使用 NETWORK：標(biāo)識(shí)符。4.如果在白名單后還要補(bǔ)充需要緩存的資源，可以使用 CACHE：標(biāo)識(shí)符。5.如果要聲明某 URI 不能訪問(wèn)時(shí)的替補(bǔ) URI，可以使用 FALLBACK：標(biāo)識(shí)符。其后的每一行包含兩個(gè) URI，當(dāng)?shù)谝粋€(gè) URI 不可訪問(wèn)時(shí)，瀏覽器將嘗試使用第二個(gè) URI。6.注釋要另起一行，以 # 號(hào)開(kāi)頭。42CACHE MANIFEST #T

22、his is a commentCACHE： index.html style.cssNETWORK: search.php login.phpFALLBACK: /api offline.html清單 4. cache manifest 示例代碼CACHE 聲明用于緩存 index.html 和 style.css 文件。NETWORK 聲明用于指定無(wú)需緩存的文件，比如登錄頁(yè)面。 FALLBACK 聲明，這個(gè)聲明允許你在資源不可用的情況下，將用戶重定向到特定文件，這個(gè)示例代碼中是 offline.html。43第四步：關(guān)聯(lián) manifest 文件到 html 文檔manifest 文件和 h

23、tml 文檔都已就緒。唯一需要做的是將 manifest 文件關(guān)聯(lián)到 html 文檔。使用 html 元素的 manifest 屬性：44如果 Web 應(yīng)用程序僅僅是一些靜態(tài)頁(yè)面的組合，那么通過(guò) cache manifest 緩存資源文件以后，就可以支持離線訪問(wèn)了那么在開(kāi)發(fā)支持離線的 Web 應(yīng)用時(shí)，就不能僅僅滿足于靜態(tài)頁(yè)面的展現(xiàn)，還必需考慮如何讓用戶在離線狀態(tài)下也可以操作數(shù)據(jù)。離線狀態(tài)時(shí)，把數(shù)據(jù)存儲(chǔ)在本地；在線以后，再把數(shù)據(jù)同步到服務(wù)器上。為了做到這一點(diǎn)，開(kāi)發(fā)者首先必須知道瀏覽器是否在線。45在線狀態(tài)判斷HTML5 提供了兩種檢測(cè)是否在線的方式：navigator.online 和 onli

24、ne/offline 事件。1.navigator.onLinenavigator.onLine 屬性表示當(dāng)前是否在線。如果為 true, 表示在線；如果為 false, 表示離線。當(dāng)網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)，navigator.onLine 的值也隨之變化。開(kāi)發(fā)者可以通過(guò)讀取它的值獲取網(wǎng)絡(luò)狀態(tài)。2.online/offline 事件當(dāng)開(kāi)發(fā)離線應(yīng)用時(shí)，通過(guò) navigator.onLine 獲取網(wǎng)絡(luò)狀態(tài)通常是不夠的。開(kāi)發(fā)者還需要在網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)立刻得到通知，因此 HTML5 還提供了 online/offline 事件。當(dāng)在線 / 離線狀態(tài)切換時(shí)，online/offline 事件將觸發(fā)在 bo

25、dy 元素上，并且沿著 document.body、document 和 window 的順序冒泡。因此，開(kāi)發(fā)者可以通過(guò)監(jiān)聽(tīng)它們的 online/offline 事件來(lái)獲悉網(wǎng)絡(luò)狀態(tài)。46示例：4748在線狀態(tài)：49切換到離線狀態(tài)：50處于離線狀態(tài)：51Tomcat 關(guān)閉52在開(kāi)發(fā)支持離線的 Web 應(yīng)用程序時(shí)，開(kāi)發(fā)者通常需要使用以下三個(gè)方面的功能：1.離線資源緩存：需要一種方式來(lái)指明應(yīng)用程序離線工作時(shí)所需的資源文件。這樣，瀏覽器才能在在線狀態(tài)時(shí)，把這些文件緩存到本地。此后，當(dāng)用 戶離線訪問(wèn)應(yīng)用程序時(shí)，這些資源文件會(huì)自動(dòng)加載，從而讓用戶正常使用。HTML5 中，通過(guò) cache manifest

26、 文件指明需要緩存的資源，并支持自動(dòng)和手動(dòng)兩種緩存更新方式。2.在線狀態(tài)檢測(cè)：開(kāi)發(fā)者需要知道瀏覽器是否在線，這樣才能夠針對(duì)在線或離線的狀態(tài)，做出對(duì)應(yīng)的處理。在 HTML5 中，提供了兩種檢測(cè)當(dāng)前網(wǎng)絡(luò)是否在線的方式。3.本地?cái)?shù)據(jù)存儲(chǔ)：離線時(shí)，需要能夠把數(shù)據(jù)存儲(chǔ)到本地，以便在線時(shí)同步到服務(wù)器上。為了滿足不同的存儲(chǔ)需求，HTML5 提供了 DOM Storage 和 Web SQL Database 兩種存儲(chǔ)機(jī)制。前者提供了易用的 key/value 對(duì)存儲(chǔ)方式，而后者提供了基本的關(guān)系數(shù)據(jù)庫(kù)存儲(chǔ)功能。53cache manifest工作原理54如何更新離線存儲(chǔ)？當(dāng)用戶本地再次聯(lián)網(wǎng)的時(shí)候，本地的離線存

27、儲(chǔ)資源需要檢查是否需要更新，這個(gè)更新過(guò)程，也是通過(guò)manifest的更新來(lái)控制的，更新了manifest文件，瀏覽器會(huì)自動(dòng)的重新下載新的manifest文件并在下一次刷新頁(yè)面的時(shí)候進(jìn)行資源文件的重新請(qǐng)求（第三次刷新替換本地緩存為最新緩存），而且這個(gè)請(qǐng)求是全局性的，也就是所有在manifest緩存列表中的文件都會(huì)被請(qǐng)求一次，而不是單獨(dú)請(qǐng)求某個(gè)特定修改過(guò)的資源文件，因?yàn)閙anifest是不知道哪個(gè)文件被修改過(guò)了的。55更新緩存應(yīng)用程序可以等待瀏覽器自動(dòng)更新緩存，也可以使用 Javascript 接口手動(dòng)觸發(fā)更新。1.自動(dòng)更新（更新manifest文件）瀏覽器除了在第一次訪問(wèn) Web 應(yīng)用時(shí)緩存資源

28、外，只會(huì)在 cache manifest 文件本身發(fā)生變化時(shí)更新緩存。而 cache manifest 中的資源文件發(fā)生變化并不會(huì)觸發(fā)更新。2手動(dòng)更新（通過(guò)javascript操作） 2.1.開(kāi)發(fā)者也可以使用 window.applicationCache 的接口更新緩存。方法是檢測(cè) window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以調(diào)用 window.applicationCache.update() 更新緩存。2.2.清除瀏覽器緩存56控制離線存儲(chǔ)的更新，需要2個(gè)步驟，一是更新資源文件，二是更新manifest文件更新manifes

29、t文件是不需要修改什么特定內(nèi)容的，只要是這個(gè)文件隨意一處被修改，那么瀏覽器就會(huì)感知一個(gè)比較好的方式是更新任意一處# 開(kāi)頭的注釋即可，其目的只是告訴瀏覽器這個(gè)manifest文件被更新過(guò)。57清單 5 手動(dòng)更新緩存 if (window.applicationCache.status = window.applicationCache.UPDATEREADY) window.applicationCache.update(); 58/*code2，緩存公用方法*/ var EventUtil = / addHandler: function(element, type, handler) / if (element.addEventListener) / element.addEventListener(type, handler, false);/ else if (element.attachEvent) / element.attachEvent(“on” + type, handler);/ else / elementon + type = handler;/ / / ;/ EventUtil.addHandler(applicationCa