HTML5 離線儲存

2021-07-16 16:35:03 字數 1391 閱讀 7580

首先來講解下離線儲存的使用方法,說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。

manifest = "cache.manifest">

...html>

然後cache.manifest檔案的書寫方式,就像下面這樣:

cache manifest

#v0.11

cache:

css/style.css

network:

resourse/logo.png

fallback:

/ /offline.html

那麼瀏覽器是怎麼對離線的資源進行管理和載入的呢?這裡需要分兩種情況來討論。

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

這個過程中有幾個問題需要注意。

對於manifest檔案進行快取的時候需要十分小心,因為可能出現一種情況就是你對manifest檔案進行了更新,但是http的快取規則告訴瀏覽器本地快取的manifest檔案還沒過期,這個情況下瀏覽器還是使用原來的manifest檔案,所以對於manifest檔案最好不要設定快取。

說了這麼多,不如自己動手來試試。這裡需要說明的是,如果需要看到離線儲存的效果,那麼你需要把你的網頁部署到伺服器上,不管是本地還是生產環境伺服器中,通過本地檔案開啟網頁是無法體驗到離線儲存的。

我在我的電腦上跑了乙個本地node伺服器,通過localhost訪問。我的manifest檔案向下面這樣:

cache manifest

#v0.11

cache:

lib/ionic/js/ionic.bundle.js

lib/angular-ui-router.js

lib/ionic/css/ionic.css

css/style.css

views/login_header.html

views/login.html

lib/ionic/fonts/ionicons.ttf?v=1.5

.2lib/ionic/fonts/ionicons.woff?v=1.5

.2network:

lib/ionic/fonts/ionicons.ttf?v=1.5

.2lib/ionic/fonts/ionicons.woff?v=1.5

.2css/style.css

然後我們訪問網頁看看效果。

很顯然,只有更新了manifest檔案,對離線資源的更新才能在瀏覽器上生效。

最後,我們來試試離線狀態下是什麼情況,這才是離線儲存的重頭戲。通過chrome設定離線狀態,重新整理頁面

HTML5 離線儲存

首先來講解下離線儲存的使用方法,說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。然後cache.manifest檔案的書寫方式,就像下面這樣 cache manifest v0.11 cache css style.css network resourse log...

html5 離線儲存

資料 quzishen manifest檔案 1 cache manifest 2 上面一句必須 manifest檔案內容型別必須配置為text cache manifest傳送到瀏覽器 3 v1.0.0 版本號 如果想更新快取內容,只要修改下manifest檔案即可,如改版本號v1.0.1 45 ...

html5離線儲存

他們有各自適應的場景。我這裡主要介紹一下localstorage,以及sessionstorage。localstorage和sessionstorage都是以乙個鍵值對的方式來儲存值,最大容量是5m。5m對於我們來說,快取一下少量的資料還是夠用的了 localstorage和sessionstor...