第一部分：Application Cache
1.Application Cache介紹
html5提供的一種應用緩存機制，使得基於web的應用程序可以離線運行。優點有如下幾點：
離線瀏覽: 用戶可以在離線狀態下瀏覽網站內容。
更快的速度: 因為數據被存儲在本地，所以速度會更快。
減輕服務器的負載: 瀏覽器只會下載在服務器上發生改變的資源。
2.如何使用ApplicationCache？
2.1開啟應用緩存:在html標簽制定manifest，manifest特性與 緩存清單(cache manifest) 文件關聯，這個文件包含了瀏覽器需要為你的應用緩存的資源(文件)列表。
2.2:編寫緩存清單文件
-
CACHE: -
這是緩存文件中記錄所屬的默認段落。在
CACHE:段落標題后(或直接跟在CACHE MANIFEST行后)列出的文件會在它們第一次下載完畢后緩存起來。 -
NETWORK: -
在
NETWORK:需要與服務器連接的白名單資源。所有類似資源的請求都會繞過緩存，即使用戶處於離線狀態。可以使用通配符“*”代表除以上指定之外全部需要從服務器拉取。 -
FALLBACK: -
FALLBACK:段指定了一個后備頁面，當資源無法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示后備頁面。兩個 URI 都必須使用相對路徑並且與清單文件同源。可以使用通配符，類似404.html。
CACHE， NETWORK， 和 FALLBACK 段落可以以任意順序出現在緩存清單文件中，並且每個段落可以在同一清單文件中出現多次。
3.下面詳細描述Application Cache的流程：
3.1.當瀏覽器訪問一個包含 manifest 特性的文檔時，如果應用緩存不存在，瀏覽器會加載文檔，然后獲取所有在清單文件中列出的文件，生成應用緩存的第一個版本。
window.applicationCache 對象發送一個 checking 事件，在遵循合適的 HTTP 緩存規則前提下，獲取清單文件。如果當前緩存的清單副本是最新的，瀏覽器將向 applicationCache 對象發送一個 noupdate 事件，到此，更新過程結束。
applicationCache.add() 方法添加到緩存中的那些文件—會被獲取並放到一個臨時緩存中，遵循適當的 HTTP 緩存規則。對於每個加入到臨時緩存中的文件，瀏覽器會向 applicationCache 對象發送一個 progress 事件。如果出現任何錯誤，瀏覽器會發送一個 error 事件，並暫停更新。
applicationCache 對象發送一個 cached 事件。.
4.Application Cache的坑
41如果你在服務器修改了任何緩存資源，同時也應該修改清單文件，這樣瀏覽器才能知道它需要重新獲取資源。
4.2鑒於文檔早已經被從緩存加載到瀏覽器中，所以更新后的文檔不會重新渲染，也就是說你更新清單之后的第一次訪問不是最新 數據，直到頁面重新加載(可以手動或通過程序)。
4.3指定了“manifest”的頁面不需要再清單里再指定，他是默認被緩存的。
4.4清單里的文件只要有一個文件緩存失敗，就會放棄全部緩存，類似數據庫“事務”機制。
第二部分：Localstorage
3.代碼解釋：正常的localstorage訪問以及存儲非常簡單，只需要localstorage.getItem(key)和localstorage.setItem(key,value)即可
該代碼定義prekey是為了給key增加前綴，以防止key沖突.return 塊是暴露方法，讓外部函數可以訪問到。
以上所用實例代碼是一個簡單的webApp在線閱讀器，是在學習過程中的練習代碼，較為簡單，但比較有代表意義;
演示地址：http://www.olivewind.com/cases/demo09_onlinereader/
源代碼：https://github.com/olivewind/webAppOnlineReader
*************轉摘：https://blog.csdn.net/kingliguo/article/details/52637087