HTML5 的離線儲存

標籤：情況   off   編寫   改變   tor   net   刪除   strong   16px   

localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
sessionStorage 資料在瀏覽器關閉後自動刪除。

在使用者沒有與網際網路串連時,可以正常訪問網站或應用,在使用者與網際網路串連時,更新使用者機器上的快取檔案。
原理：HTML5 的離線儲存是基於一個建立的.appcache 檔案的緩衝機制(不是儲存技術),通過這個檔案上的解析清單離線儲存資源，這些資源就會像 cookie一樣被儲存了下來。之後當網路在處於離線狀態下時,瀏覽器會通過被離線儲存的資料進行頁面展示。

如何使用：
1、頁面頭部像下面一樣加入一個 manifest 的屬性；
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 檔案,如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。

離線的情況下，瀏覽器就直接使用離線儲存的資源。

HTML5 的離線儲存