HTML5 的離線儲存
阿新 • • 發佈：2017-08-19
0.11 logo 頭部 locals style session .html ani 新建
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 的離線儲存