離線應用和客戶端儲存（JavaScript）
1.進行離線檢測：
支援離線web應用開發是HTML5的一個重點。所謂離線，就是裝置再不能上網的情況下仍然可以執行應用。HTML5把離線應用作為重點。
開發離線web應用需要幾個步驟：首先確保應用知道裝置是否能上網，以便下一步執行正確的操作。然後，應用還必須能訪問一定的資源（影象，JavaScript，css等），只有這樣才能正常工作。最後，必須有一塊本地空間用於儲存資料。無論是否上網都不妨礙讀寫。
開發離線的第一步就是知道裝置是線上還是離線，HTML5定義一個屬性：navigator.onLine的屬性。這個屬性值為true，表示裝置線上，值為false，表示裝置離線。為了更好的確定網路是否可用，HTML5還定義了兩個事件。這兩個事件是在window物件上觸發：online和offline。程式碼如下：
2.應用快取：
HTML5的應用快取：appcache，專門為開發離線web應用而設計的。appcache就是從瀏覽器的快取中分出來的一塊快取區。要想在這個快取區中儲存資料，可以使用一個描述檔案（manifest file），列出要下載和快取的資源。其實這個主要的API是applicationCache物件。
這個物件有一個status屬性，屬性的值是常量，表示應用快取的如下狀態：
0：無快取，即沒有與頁面相關的應用快取。
1：閒置，即應用快取未得到更新
2：檢查中，即應用快取正在下載描述檔案中指定的資源
3：下載中，即應用快取正在下載描述檔案中指定的資源
4：更新完成，即應用快取已經更新資源，而且所有的資源都已經全部下載完畢。可以通過swapCache（）來使用。
5：廢棄：即應用快取的描述檔案已經不存在了。因此頁面無法再訪問應用快取。
應用快取還有很多相關的事件，表示其狀態的改變，以下就是這些事件：
checking：在瀏覽器為應用快取查詢更新時觸發。
error:在檢查更新或者下載資源的期間發生錯誤時觸發
onupdate：在檢查描述檔案發現檔案無變化時觸發。
downloading：再開始下載應用快取資源時觸發
progress：在檔案下載應用快取過程中持續不斷的觸發。
updateready：在頁面新的應用快取下載完畢並且可以通過swapCache（）使用時觸發。
cached：在應用快取完整可用時觸發。
一般來講：這些事件會隨著頁面載入按上述順序依次觸發，不過，通過呼叫update方法也可以手工干預，讓應用快取為檢查更新而觸發上述事件。
applicationCache.update()
update()一經呼叫，應用快取就會去檢查描述檔案是否更新（觸發checking事件），然後像頁面剛剛載入一樣，繼續執行後續操作，如果觸發了cached事件，說明應用快取已經準備就緒，不會再發生其它操作了。如果觸發了updateready事件，則說明新版本應用快取已經可用。而此時你需要呼叫swapCache（）來啟用新的快取。
EventUtil.addHandler(applicationCache,"updateready",function(params) { applicationCache.swapCache();});3.資料儲存：
提供資料儲存的有以下方式：cookie，web storage，indexedDB等
cookie相關的知識，網上有很多資源，我就不再詳細的介紹。
web storage：包含了兩種物件的定義：sessionStorage和globalStorage（後來被localStorage）。
①.sessionStorage:
sessionStorage物件儲存特定的某個會話資料，也就是該資料只能保持到瀏覽器關閉。這個物件就像會話cookie，也會在瀏覽器關閉後消失。由於sessionStorage物件其實是storage的一個例項，所以可以使用setitem（）或者直接設定新的屬性來儲存資料：以下就是兩種方法：
sessionStorage中有資料，可以使用getItem（）或者通過直接訪問屬性名來或許資料：
還可以通過結合length和key方法來迭代sessionStorage中的值：
要從sessionStorage刪除資料可以使用：
// 使用delete刪除一個值delete sessionStorage.name;// 使用方法刪除一個值：sessionStorage.removeItem("book");sessionStorage只適用於針對會話的小段資料，如果需要跨越會話儲存資料，那麼globalStorage或者localStorage更為合適。
②.localStorage物件：
作為持久儲存客戶端資料的方案。儲存在localStorage中的資料保留到通過JavaScript刪除或者是使用者清除瀏覽器快取。
③storage事件：
對storage物件進行任何修改，都會在文件上觸發storage事件，當通過屬性或者setItem（）方法儲存資料，或者使用delete操作符或者removeItem()刪除資料，或者使用clean（）方法時，都會觸發該事件，這個事件的event物件有以下屬性：
domain:發生變化的儲存空間的域名
key:設定或者刪除的鍵名
newvalue：如果設定值，則是新值，如果是刪除鍵，則是null
oldvalue：鍵被更改之前的值
無論對sessionStorage，localStorage進行操作都會觸發storage事件，程式碼如下：
window.addEventListener("storage",function (event) { alert('Storage changed for'+event.domain); });上述程式碼很容易犯的錯誤是，在同一個網頁修改本地儲存，又在同一個網頁監聽，這樣是沒有效果的。
需要將上面兩個網頁儲存，放到同一個伺服器上，然後，先開啟A.html，再開啟B.html。就會看到A.html會彈出提示框。注意兩個網頁要同源。
對這個事件解釋不錯的一個帖子：點選開啟連結
4.indexedDB的介紹和使用：
是在瀏覽器中儲存結構化資料的一種資料庫。indexedDB是為了替代目前已被廢棄的Web SQL Database API而出現的。indexedDB的思想是想建立一套API，方便儲存和讀取JavaScript物件，同事還支援查詢和搜尋。
indexedDB的設計操作完全是非同步操作的。因此，大多數操作都是以請求的方式進行。但這些操作會後期執行。然後如果成功，則返回結果。如果失敗，則返回錯誤，差不多每一次的indexedDB操作，都需要你註冊onerror或者onsuccess事件處理程式，以確保適當地處理結果。
indexedDB最大的特點就是使用物件儲存資料。而不是使用表儲存資料。
使用indexedDB第一步就是開啟它，即要把開啟的資料庫名傳遞給indexDB.open().呼叫indexDB.open返回的是一個IDBRequest物件。這個物件上新增上述的兩個事件：程式碼如下
預設情況下，indexedDB資料庫是沒有版本號的。最好一開始就為資料庫指定一個名字，為此可以呼叫setVersion()方法，傳入字串形式表示版本號。
關於indexedDB的更多知識，會有後續專門的文章進行闡述，這裡只是簡單的提一下
indexedDB建立物件儲存空間，需要定義一個鍵，然後就可以新增資料，可以使用遊標在物件儲存空間中查詢特定的物件，而索引則是為了提高查詢速度而基於特定的屬性建立的。
有了上述這些選擇，就可以在客戶端機器上使用JavaScript儲存大量資料了，但是你要小心，不要在客戶端儲存敏感資料，因為資料快取不會加密。
寫這麼多關於離線快取的知識點，希望對大家有所幫助，與前端的小夥伴共勉......