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

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

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

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

5、age功能，就是在Web上存儲數(shù)據(jù)，提供兩種類型的API：localStorage和sessionStorage。 區(qū)別： localStorage在本地永久性存儲數(shù)據(jù)，除非顯式將其刪除或清空。 sessionStorage存儲的數(shù)據(jù)只在會話期間有效，關(guān)閉瀏覽器則自動刪除。兩個(gè)對象都有共同的API。,瀏覽器的支持,檢查瀏覽器是否支持WebStorage-請打開ex3_1.html,檢測瀏覽器是否支持,Storage 接口,interface Storage Storage 接口 readonly attribute unsigned long length; DOMString? key(un

6、signed long index); getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear(); ;,localStorage和sessionStorage操作,localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等 localStorage和sessionStor

7、age的方法： setItem 存儲value 用途：將value存儲到key字段 用法：.setItem( key, value) 代碼示例： sessionStorage.setItem(key, value); localStorage.setItem(site, js8.in);,也可以通過localStorage.和localStorage的形式訪問localstorage數(shù)據(jù)。 例如，下面3條語句都可以在localstorage中存儲鍵名為key、值為value的數(shù)據(jù)： localStorage.setItem(key, value); localStorage.key = val

8、ue; localStoragekey = value; 注：保存時(shí)，不允許重復(fù)保存相同的鍵名，保存后可以修改鍵值，但不允許修改鍵名,localStorage和sessionStorage操作,getItem獲取value 用途：獲取指定key本地存儲的值 用法：.getItem(key) 代碼如下: var value = sessionStorage.getItem(key); var site = localStorage.getItem(site);,localStorage和sessionStorage操作,也可以通過localStorage.和localStorage的形式訪問lo

9、calstorage數(shù)據(jù)。 例如，下面3條語句都可以獲取localstorage中存儲的鍵名為key的數(shù)據(jù)值到變量value中： var value = localStorage.getItem(key); var value = localStorage.key; var value = localStoragekey;,localStorage和sessionStorage操作,removeItem刪除指定key 用途：刪除指定key本地存儲的值 用法：.removeItem(key) 代碼示例： sessionStorage.removeItem(key); localStorage.r

10、emoveItem(site);,localStorage和sessionStorage操作,clear清除所有的key/value 用途：清除所有的key/value 用法：.clear() 代碼示例： sessionStorage.clear(); localStorage.clear();,localStorage和sessionStorage操作,2、簡單Web留言本,如果要保存的數(shù)據(jù)量比較大的話，使用上述方法會比較麻煩 簡單Web留言本示例，要求： 使用一個(gè)多行文本框來輸入數(shù)據(jù) 點(diǎn)擊按鈕時(shí)將文本框中的數(shù)據(jù)保存到localStorage中 在表單下部放置一個(gè)table元素來顯示保存后的

11、數(shù)據(jù) 保存內(nèi)容時(shí)，同時(shí)保存當(dāng)前日期和時(shí)間，并將該日期和時(shí)間一并顯示在p元素中,示例：,3、作為簡易數(shù)據(jù)庫使用,如果想要將WebStorage作為數(shù)據(jù)庫來使用的話，需要考慮幾個(gè)問題： 數(shù)據(jù)庫中的表都分為幾列，怎樣實(shí)現(xiàn)對列的管理 怎樣實(shí)現(xiàn)數(shù)據(jù)的檢索功能 實(shí)現(xiàn)對列的管理，可以使用JSON格式（JavaScript object Notation，是將JavaScript中的對象作為文本形式來保存時(shí)使用的一種格式），獲取對象時(shí)再通過JSON格式獲取 JSON是一種將對象與字符串可以相互表示的數(shù)據(jù)轉(zhuǎn)換標(biāo)準(zhǔn) JSON.parse:將JavaScript對象表示法的JSON字符串轉(zhuǎn)換為對象(字符串轉(zhuǎn)對象)

12、JSON.stringify:JavaScript json對象轉(zhuǎn)換為JavaScript對象表示法的JSON字符串(對象轉(zhuǎn)為字符串),示例：客戶信息管理網(wǎng)頁,客戶的信息分為：姓名、E-Mail地址、電話號碼、備注，需要把它們保存在localStorage中，如果輸入用戶姓名，可以進(jìn)行檢索并獲取該客戶的所有信息,小結(jié)：為什么比cookie好,1. 從容量上講WebStorage一般瀏覽器提供5M的存儲空間，用來存儲視頻、圖片神馬的不夠，但對于絕大部分操作足矣 2.安全性上WebStorage并不作為HTTP header發(fā)送的瀏覽器，所以相對安全 3.從流量上講，因?yàn)閃ebStorage不傳送

13、到服務(wù)器，所以不必要的流量可以節(jié)省，這樣對于高頻次訪問或者針對手機(jī)移動設(shè)備的網(wǎng)頁還是很不錯(cuò)的。,這并不意味著WebStorage可以取代cookie，而是有了WebStorage后cookie能只做它應(yīng)該做的事情了作為客戶端與服務(wù)器交互的通道，保持客戶端狀態(tài)。所以僅僅作為本地存儲解決方案WebStorage是優(yōu)于cookie的。,2.5 storage事件,HTML5提供一個(gè)storage事件，當(dāng)setItem()、removeItem()或者clear()方法被調(diào)用，并且數(shù)據(jù)真的發(fā)生了改變時(shí)，storage事件就會被觸發(fā)。注意，只有數(shù)據(jù)真的發(fā)生了變化，才會觸發(fā)storage事件。也就是說，如

14、果當(dāng)前的存儲區(qū)域是空的，調(diào)用clear()是不會觸發(fā)事件的?；蛘咄ㄟ^setItem()來設(shè)置一個(gè)與現(xiàn)有值相同的值，storage事件也是不會被觸發(fā)的torage事件的。,2.5 storage事件,Event對象包含如下屬性： storageArea，表示存儲類型（localstorage或sessionstorage）； key，發(fā)生改變的項(xiàng)的key oldValue，發(fā)生改變的項(xiàng)的原值 newValue，發(fā)生改變的項(xiàng)的新值 url， key改變發(fā)生的URL,二、本地?cái)?shù)據(jù)庫,在HTML5中，大大豐富了客戶端本地可以存儲的內(nèi)容，添加了很多功能來將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶端本

15、地，從而大大提高了Web應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān)，使Web時(shí)代重新回到了“客戶端為重，服務(wù)器端為輕”的時(shí)代 數(shù)據(jù)庫的本地存儲功能就是其中的代表 HTML4中，數(shù)據(jù)庫只能放在服務(wù)器端，只能通過服務(wù)器來訪問數(shù)據(jù)庫，但是在HTML5中，可以像訪問本地文件那樣輕松的對內(nèi)置數(shù)據(jù)庫進(jìn)行直接訪問了,1、SQLite數(shù)據(jù)庫,SQLite，是一款輕型的關(guān)系數(shù)據(jù)庫，設(shè)計(jì)目標(biāo)是嵌入式系統(tǒng)，目前已經(jīng)在很多嵌入式產(chǎn)品中使用了它 它占用資源非常低，在嵌入式設(shè)備中，可能只需要幾百K的內(nèi)存就夠了。 它能夠支持Windows/Linux/Unix等等主流的操作系統(tǒng)，同時(shí)能夠跟很多程序語言相結(jié)合，比如 C#、PHP、

16、Java等 比起Mysql、PostgreSQL這兩款開源世界著名的數(shù)據(jù)庫管理系統(tǒng)來講，它的處理速度比他們都快。,不像常見的客戶-服務(wù)器范例，SQLite引擎不是個(gè)程序與之通信的獨(dú)立進(jìn)程，而是連接到程序中成為它的一個(gè)主要部分。 所以主要的通信協(xié)議是在編程語言內(nèi)的直接API調(diào)用。這在消耗總量、延遲時(shí)間和整體簡單性上有積極的作用。 整個(gè)數(shù)據(jù)庫(定義、表、索引和數(shù)據(jù)本身)都在宿主主機(jī)上存儲在一個(gè)單一的文件中。它的簡單的設(shè)計(jì)是通過在開始一個(gè)事務(wù)的時(shí)候鎖定整個(gè)數(shù)據(jù)文件而完成的。,2、SQLite數(shù)據(jù)庫的使用,要使用SQLite，有兩個(gè)不要的步驟： 創(chuàng)建訪問數(shù)據(jù)庫的對象 使用事務(wù)處理 使用openData

17、base方法創(chuàng)建訪問數(shù)據(jù)庫的對象，該方法返回創(chuàng)建后的數(shù)據(jù)庫對象，如果不存在，則創(chuàng)建,1、數(shù)據(jù)庫名稱。 2、版本號 目前為1.0。 3、對數(shù)據(jù)庫的描述。 4、設(shè)置數(shù)據(jù)的大小。 5、回調(diào)函數(shù)(可省略)。,實(shí)際訪問數(shù)據(jù)庫的時(shí)候，還需要調(diào)用transaction方法，用來執(zhí)行事務(wù)處理 transaction可以防止在對數(shù)據(jù)庫進(jìn)行訪問及執(zhí)行有關(guān)操作的時(shí)候受到外界打擾 transaction對象的executeSql方法： transaction.executeSql(sqlquery, ,dataHandler,errorHandle); 在executeSql方法中，將SQL語句中所要用到的參數(shù)先用“

18、？”代替，然后將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中 (“update stu set age=?where name=？;”,age,name);,第三個(gè)參數(shù)為執(zhí)行sql語句成功時(shí)調(diào)用的回調(diào)函數(shù) function dataHandler（transaction，results） 第二個(gè)參數(shù)為執(zhí)行查詢操作時(shí)返回的查詢到的結(jié)果集對象,第四個(gè)參數(shù)為執(zhí)行sql語句出差時(shí)調(diào)用的回調(diào)函數(shù) function errorHandler（transaction，errmsg） 第二個(gè)參數(shù)為執(zhí)行發(fā)生錯(cuò)誤時(shí)的錯(cuò)誤文字信息,二、離線存儲,HTML5離線存儲功能非常強(qiáng)大，它的作用是：在用戶沒有與因特網(wǎng)連接時(shí)，照樣可以訪問

19、站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，自動更新緩存數(shù)據(jù)。 在頁面中的數(shù)據(jù)加載時(shí)，你可以自己設(shè)定一些要緩存的圖片、flash、css、js、html等文件，等下次不能聯(lián)網(wǎng)的情況下，你可以用那些緩存的文件。這就是HTML5的離線應(yīng)用。,應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢： 離線瀏覽 用戶可在應(yīng)用離線時(shí)使用它們 速度 已緩存資源加載得更快 減少服務(wù)器負(fù)載 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。,第一步、添加 HTML5 doctype,第一件要做的事情是創(chuàng)建一個(gè)符合規(guī)范的 HTML5 文檔。 HTML5 doctype 相比于 xhtml 版本的 doctype 而言，要簡單明了得多： ,第二步：配置

20、mime類型,需要服務(wù)器。這里用tomcat服務(wù)器來講解。 首先要先把以manifest為后綴的文件的mime類型配置為text/cache-manifest。 一講到tomcat配置，熟悉的自然就會想到web.xml這個(gè)文件，在Tomcat安裝目錄下conf子目錄的web.xml文件中加入如下配置就行： manifest text/cache-manifest ,第三步：創(chuàng)建 manifest 文件,新建一個(gè)文本文檔并另存名為 *.manifest cache manifest 文件需要遵循的格式 1.首行必須是 CACHE MANIFEST。 2.其后，每一行列出一個(gè)需要緩存的資源文件名。

21、 3.可根據(jù)需要列出在線訪問的白名單。白名單中的所有資源不會被緩存，在使用時(shí)將直接在線訪問。聲明白名單使用 NETWORK：標(biāo)識符。 4.如果在白名單后還要補(bǔ)充需要緩存的資源，可以使用 CACHE：標(biāo)識符。 5.如果要聲明某 URI 不能訪問時(shí)的替補(bǔ) URI，可以使用 FALLBACK：標(biāo)識符。其后的每一行包含兩個(gè) URI，當(dāng)?shù)谝粋€(gè) URI 不可訪問時(shí)，瀏覽器將嘗試使用第二個(gè) URI。 6.注釋要另起一行，以 # 號開頭。,CACHE MANIFEST #This is a comment CACHE： index.html style.css NETWORK: search.php logi

22、n.php FALLBACK: /api offline.html,清單 4. cache manifest 示例代碼,CACHE 聲明用于緩存 index.html 和 style.css 文件。 NETWORK 聲明用于指定無需緩存的文件，比如登錄頁面。 FALLBACK 聲明，這個(gè)聲明允許你在資源不可用的情況下，將用戶重定向到特定文件，這個(gè)示例代碼中是 offline.html。,第四步：關(guān)聯(lián) manifest 文件到 html 文檔,manifest 文件和 html 文檔都已就緒。唯一需要做的是將 manifest 文件關(guān)聯(lián)到 html 文檔。 使用 html 元素的 manifes

23、t 屬性： ,如果 Web 應(yīng)用程序僅僅是一些靜態(tài)頁面的組合，那么通過 cache manifest 緩存資源文件以后，就可以支持離線訪問了 那么在開發(fā)支持離線的 Web 應(yīng)用時(shí)，就不能僅僅滿足于靜態(tài)頁面的展現(xiàn)，還必需考慮如何讓用戶在離線狀態(tài)下也可以操作數(shù)據(jù)。離線狀態(tài)時(shí)，把數(shù)據(jù)存儲在本地；在線以后，再把數(shù)據(jù)同步到服務(wù)器上。為了做到這一點(diǎn)，開發(fā)者首先必須知道瀏覽器是否在線。,在線狀態(tài)判斷,HTML5 提供了兩種檢測是否在線的方式：navigator.online 和 online/offline 事件。 1.navigator.onLine navigator.onLine 屬性表示當(dāng)前是否在線

24、。如果為 true, 表示在線；如果為 false, 表示離線。當(dāng)網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)，navigator.onLine 的值也隨之變化。開發(fā)者可以通過讀取它的值獲取網(wǎng)絡(luò)狀態(tài)。 2.online/offline 事件 當(dāng)開發(fā)離線應(yīng)用時(shí)，通過 navigator.onLine 獲取網(wǎng)絡(luò)狀態(tài)通常是不夠的。開發(fā)者還需要在網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)立刻得到通知，因此 HTML5 還提供了 online/offline 事件。當(dāng)在線 / 離線狀態(tài)切換時(shí)，online/offline 事件將觸發(fā)在 body 元素上，并且沿著 document.body、document 和 window 的順序冒泡。因此，開發(fā)者可

25、以通過監(jiān)聽它們的 online/offline 事件來獲悉網(wǎng)絡(luò)狀態(tài)。,示例：,在線狀態(tài)：,切換到離線狀態(tài)：,處于離線狀態(tài)：,Tomcat 關(guān)閉,在開發(fā)支持離線的 Web 應(yīng)用程序時(shí)，開發(fā)者通常需要使用以下三個(gè)方面的功能： 1.離線資源緩存：需要一種方式來指明應(yīng)用程序離線工作時(shí)所需的資源文件。這樣，瀏覽器才能在在線狀態(tài)時(shí)，把這些文件緩存到本地。此后，當(dāng)用 戶離線訪問應(yīng)用程序時(shí)，這些資源文件會自動加載，從而讓用戶正常使用。HTML5 中，通過 cache manifest 文件指明需要緩存的資源，并支持自動和手動兩種緩存更新方式。 2.在線狀態(tài)檢測：開發(fā)者需要知道瀏覽器是否在線，這樣才能夠針對在線

26、或離線的狀態(tài)，做出對應(yīng)的處理。在 HTML5 中，提供了兩種檢測當(dāng)前網(wǎng)絡(luò)是否在線的方式。 3.本地?cái)?shù)據(jù)存儲：離線時(shí)，需要能夠把數(shù)據(jù)存儲到本地，以便在線時(shí)同步到服務(wù)器上。為了滿足不同的存儲需求，HTML5 提供了 DOM Storage 和 Web SQL Database 兩種存儲機(jī)制。前者提供了易用的 key/value 對存儲方式，而后者提供了基本的關(guān)系數(shù)據(jù)庫存儲功能。,cache manifest工作原理,如何更新離線存儲？,當(dāng)用戶本地再次聯(lián)網(wǎng)的時(shí)候，本地的離線存儲資源需要檢查是否需要更新，這個(gè)更新過程，也是通過manifest的更新來控制的，更新了manifest文件，瀏覽器會自動的重

27、新下載新的manifest文件并在下一次刷新頁面的時(shí)候進(jìn)行資源文件的重新請求（第三次刷新替換本地緩存為最新緩存），而且這個(gè)請求是全局性的，也就是所有在manifest緩存列表中的文件都會被請求一次，而不是單獨(dú)請求某個(gè)特定修改過的資源文件，因?yàn)閙anifest是不知道哪個(gè)文件被修改過了的。,更新緩存,應(yīng)用程序可以等待瀏覽器自動更新緩存，也可以使用 Javascript 接口手動觸發(fā)更新。 1.自動更新（更新manifest文件） 瀏覽器除了在第一次訪問 Web 應(yīng)用時(shí)緩存資源外，只會在 cache manifest 文件本身發(fā)生變化時(shí)更新緩存。而 cache manifest 中的資源文件發(fā)生變

28、化并不會觸發(fā)更新。 2手動更新（通過javascript操作） 2.1.開發(fā)者也可以使用 window.applicationCache 的接口更新緩存。方法是檢測 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以調(diào)用 window.applicationCache.update() 更新緩存。 2.2.清除瀏覽器緩存,控制離線存儲的更新，需要2個(gè)步驟，一是更新資源文件，二是更新manifest文件 更新manifest文件是不需要修改什么特定內(nèi)容的，只要是這個(gè)文件隨意一處被修改，那么瀏覽器就會感知 一個(gè)比較好的方式是更新任意一處#

29、開頭的注釋即可，其目的只是告訴瀏覽器這個(gè)manifest文件被更新過。,清單 5 手動更新緩存 if (window.applicationCache.status = window.applicationCache.UPDATEREADY) window.applicationCache.update(); ,/*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(applicationCache, “updateready”, fu