標籤：
在使用者沒有與網際網路串連時，可以正常訪問網站或應用，在使用者與網際網路串連時，更新使用者機器上的快取檔案。
原理：HTML5的離線儲存是基於一個建立的.appcache檔案的緩衝機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
<!DOCTYPE HTML><html manifest = "cache.manifest">...</html>
2、在cache.manifest檔案的編寫離線儲存的資源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
3、在離線狀態時，操作window.applicationCache進行需求實現。
那麼瀏覽器是怎麼對離線的資源進行管理和載入的呢？這裡需要分兩種情況來討論。
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根 據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然 後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的 資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。
這個過程中有幾個問題需要注意。
如果伺服器對離線的資源進行了更新，那麼必須更新manifest檔案之後這些資源才能被瀏覽器重新下載，如果只是更新了資源而沒有更新manifest檔案的話，瀏覽器並不會重新下載資源，也就是說還是使用原來離線儲存的資源。
對於manifest檔案進行緩衝的時候需要十分小心，因為可能出現一種情況就是你對manifest檔案進行了更新，但是http的緩衝 規則告訴瀏覽器本機快取的manifest檔案還沒到期，這個情況下瀏覽器還是使用原來的manifest檔案，所以對於manifest檔案最好不要設 置緩衝。
瀏覽器在下載manifest檔案中的資源的時候，它會一次性下載所有資源，如果某個資源由於某種原因下載失敗，那麼這次的所有更新就算是失敗的，瀏覽器還是會使用原來的資源。
在更新了資源之後，新的資源需要到下次再開啟app才會生效，如果需要資源馬上就能生效，那麼可以使用window.applicationCache.swapCache()方法來使之生效，出現這種現象的原因是瀏覽器會先使用離線資源載入頁面，然後再去檢查manifest是否有更新，所以需要到下次開啟頁面才會生效。
詳細的使用請參考：[有趣的HTML5：離線儲存](http://segmentfault.com/a/1190000000732617)HTML5的離線儲存
HTML5的離線儲存
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
