HTML5的離線儲存

時間 2019-12-04

標籤 html5 html 離線儲存欄目 HTML5 简体版

原文原文鏈接

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
       原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

       如何使用：
       一、頁面頭部像下面同樣加入一個manifest的屬性；css

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

二、在cache.manifest文件的編寫離線存儲的資源；
html

 CACHE MANIFEST
            #v0.11
            CACHE:
            js/app.js
            css/style.css
            NETWORK:
            resourse/logo.png
            FALLBACK:
            / /offline.html

三、在離線狀態時，操做window.applicationCache進行需求實現。segmentfault

瀏覽器怎麼解析manifest

那麼瀏覽器是怎麼對離線的資源進行管理和加載的呢？這裏須要分兩種狀況來討論。瀏覽器

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。緩存
離線的狀況下，瀏覽器就直接使用離線存儲的資源。服務器

這個過程當中有幾個問題須要注意。cookie

若是服務器對離線的資源進行了更新，那麼必須更新manifest文件以後這些資源才能被瀏覽器從新下載，若是隻是更新了資源而沒有更新manifest文件的話，瀏覽器並不會從新下載資源，也就是說仍是使用原來離線存儲的資源。網絡
對於manifest文件進行緩存的時候須要十分當心，由於可能出現一種狀況就是你對manifest文件進行了更新，可是http的緩存規則告訴瀏覽器本地緩存的manifest文件還沒過時，這個狀況下瀏覽器仍是使用原來的manifest文件，因此對於manifest文件最好不要設置緩存。app
瀏覽器在下載manifest文件中的資源的時候，它會一次性下載全部資源，若是某個資源因爲某種緣由下載失敗，那麼此次的全部更新就算是失敗的，瀏覽器仍是會使用原來的資源。code
在更新了資源以後，新的資源須要到下次再打開app纔會生效，若是須要資源立刻就能生效，那麼可使用window.applicationCache.swapCache()方法來使之生效，出現這種現象的緣由是瀏覽器會先使用離線資源加載頁面，而後再去檢查manifest是否有更新，因此須要到下次打開頁面才能生效。