離線緩存

applicationCache

第一次加載后將數據緩存，如果沒有清除緩存，下一次沒有網絡也能加載。

使用

1. 使用 manifest 屬性，引入 .appcache 文件

每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存(除非在 manifest 文件中直接指定了該頁面)

manifest 文件的 建議 的文件擴展名是：.appcache

Document

2. 編寫 demo.appcache 文件

CACHE MANIFEST 必須的，下面寫需要緩存的文件，將在首次下載后進行緩存

NETWORK: 下面的文件永遠不會被緩存，且離線時是不可用的

可以使用星號來指示所有其他資源/文件都需要因特網連接

NETWORK:

*

FALLBACK: 如果無法建立因特網連接，則用 “offline.html” 替代 /html5/ 目錄中的所有文件，第一個 url 是資源，第二個是替補

CACHE MANIFEST

logo.png

main.js

NETWORK:

index.css

FALLBACK:

# 訪問失敗后 重定向

/html5/ /404.html

目前為止就實現了離線緩存

緩存狀態

window.applicationCache.status 查看緩存的當前狀態

0 == UNCACHED === 未緩存

1 == IDLE === 空閑(緩存為最新狀態)

2 == CHECKING === 檢查中

3 == DOWNLOADING === 下載中

4 == UPDATEREADY === 更新就緒

5 == OBSOLETE === 緩存過期

相關方法

1. applicationCache.update() 主動更新緩存

//利用定時器隔一定時間自動更新一下緩存

setInterval(function(){

applicationCache.update();

},10000);

2. swapCache() 所有的請求都從新緩存中獲取

注意：這并不會重新載入應用程序：所有已經載入的html文件、圖片、腳本等資源都不會改變。但是，之后的請求將從最新的緩存中獲取。這會導致“版本錯亂”的問題，因此一般不推薦使用，除非應用程序設計得很好，確保這樣的方式沒有問題。

緩存相關事件

1. updateready 當有新的緩存，并更新完以后，觸發此事件

window.applicationCache.onupdateready = function(){

alert("緩存更新完成");

},false);

2. progress 有新的緩存，在下載過程中，會間斷性觸發

event包含：loaded和total。loaded代表當前已經加載完成的文件，total為總共需要更新的文件數

applicationCache.onprogress = function(e){

alert(applicationCache.status); //3... 3表示正在下載

},false);

3. cached 下載完成并且首次將應用程序下載到緩存中時觸發

4. updaterady 更新完成，下載完成并將緩存中的應用程序更新后觸發

觸發此事件的時候，用戶任然可以看到老版本的應用程序

5. error 瀏覽器處于離線狀態，檢查清單列表失敗

當一個未緩存的應用程序引用一個不存在的清單文件，也會觸發此事件

6. obsolete 如果一個緩存的應用程序引用一個不存在的清單文件會觸發

7. checking 正在檢查，每次載入一個設置了manifest屬性的html文件，瀏覽器都會觸發

8. downloading 正在下載

9. noupdate 檢查更新結束，沒有需要更新

作者：阿西瓜

總結

以上是生活随笔為你收集整理的html开启页面离线缓存,HTML5 离线缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。