chap16本地存儲與離線應用

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

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

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

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

5、提供兩種類型的API：localStorage和sessionStorage。區(qū)別：localStorage在本地永久性存儲數據，除非顯式將其刪除或清空。sessionStorage存儲的數據只在會話期間有效，關閉瀏覽器則自動刪除。兩個對象都有共同的API。12瀏覽器的支持13檢查瀏覽器是否支持WebStorage-請打開ex3_1.html檢測瀏覽器是否支持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:唯一的屬性，只讀，用來獲取storage內的鍵值對數量。key：根據index獲取storage的鍵名getItem：根據key獲取storage內的對應valuesetItem：為storage內添加鍵值對removeItem：根據鍵名，刪除鍵值對clear：清空stora

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

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

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

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

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

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

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

14、當setItem()、removeItem()或者clear()方法被調用，并且數據真的發(fā)生了改變時，storage事件就會被觸發(fā)。注意，只有數據真的發(fā)生了變化，才會觸發(fā)storage事件。也就是說，如果當前的存儲區(qū)域是空的，調用clear()是不會觸發(fā)事件的。或者通過setItem()來設置一個與現有值相同的值，storage事件也是不會被觸發(fā)的torage事件的。312.5 storage事件 Event對象包含如下屬性： storageArea，表示存儲類型（localstorage或sessionstorage）； key，發(fā)生改變的項的key oldValue，發(fā)生改變的項的原值 n

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

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

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

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

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

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

21、stcache manifest 文件需要遵循的格式1.首行必須是 CACHE MANIFEST。2.其后，每一行列出一個需要緩存的資源文件名。3.可根據需要列出在線訪問的白名單。白名單中的所有資源不會被緩存，在使用時將直接在線訪問。聲明白名單使用 NETWORK：標識符。4.如果在白名單后還要補充需要緩存的資源，可以使用 CACHE：標識符。5.如果要聲明某 URI 不能訪問時的替補 URI，可以使用 FALLBACK：標識符。其后的每一行包含兩個 URI，當第一個 URI 不可訪問時，瀏覽器將嘗試使用第二個 URI。6.注釋要另起一行，以 # 號開頭。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 聲明用于指定無需緩存的文件，比如登錄頁面。 FALLBACK 聲明，這個聲明允許你在資源不可用的情況下，將用戶重定向到特定文件，這個示例代碼中是 offline.html。43第四步：關聯(lián) manifest 文件到 html 文檔manifest 文件和 h

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

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

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

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

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

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

29、t文件是不需要修改什么特定內容的，只要是這個文件隨意一處被修改，那么瀏覽器就會感知一個比較好的方式是更新任意一處# 開頭的注釋即可，其目的只是告訴瀏覽器這個manifest文件被更新過。57清單 5 手動更新緩存 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