當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5 实现离线数据缓存

發布時間：2023/12/2 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5 实现离线数据缓存小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.配置緩存文件 cache manifest

MIME TYPE：text/cache-manifest
文件名稱：name.appcache
作用：用于配置需要緩存的文件

2.使用方法

在服務器上添加MIME TYPE
在apache virtual host 中添加
[plain]?view plaincopy

AddType?text/cache-manifest?.appcache??

創建 name.manifest，文件后綴可自定義，定義后需要在服務器上添加對應的MIME TYPE
[plain]?view plaincopy

CACHE?MANIFEST??

#VERSION?1.0??

CACHE:??

index.html??

./js/jquery.js??

./css/style.css??

NETWORK:??

./upload/??

FAILBACK:??

./proxy/?proxy.html??

CACHE MANIFEST：文件標識
#VERSION 1.0 ：版本號，只是一行注釋，但改變可以更新緩存
CACHE：表示要緩存的文件
NETWORK：表示需要連接服務器的文件
FAILBACK：表示當沒有響應時的替代方案

<html>標簽添加manifest屬性
[html]?view plaincopy

<html?manifest="name.appcache">??

3.更新方法

1.自動更新：瀏覽器在第一次訪問時訪問應用緩存，之后只會在cache manifest文件發生變化時更新緩存（即使注釋變化也會更新，#VERSION 1.0的作用），而cache manifest中的資源文件發生變化則不會觸發更新。

2.手動更新：以編程方法更新緩存，先調用applicationCache.update()，此操作嘗試更新用戶的緩存（前提是cache manifest文件有更改）。然后當applicationCache.status為UPDATEREADY狀態時，調用applicationCache.swapCache()即可將原緩存換成新緩存。

代碼如下：
[javascript]?view plaincopy

var?appCache?=?window.applicationCache;??

appCache.update();?//?Attempt?to?update?the?user's?cache.??

...??

if?(appCache.status?==?window.applicationCache.UPDATEREADY)?{??

????appCache.swapCache();?//?The?fetch?was?successful,?swap?in?the?new?cache.??

}??

使用update() 和 swapCache() 不會向用戶提供更新的資源，只會讓瀏覽器檢查是否有新的cache manifest清單，下載指定的更新內容及重新填充應用緩存。因此需要兩次加載才能向用戶提供新內容。第一次是獲得新的應用緩存，第二次是刷新網頁內容。

避免重新加載兩次的麻煩，可以設置監聽器，監聽網頁加載時updateready的事件。

代碼如下：
[javascript]?view plaincopy

//?Check?if?a?new?cache?is?available?on?page?load.??

window.addEventListener('load',?function(e)?{??

????window.applicationCache.addEventListener('updateready',?function(e)?{??

????????if?(window.applicationCache.status?==?window.applicationCache.UPDATEREADY)?{??

????????//?Browser?downloaded?a?new?app?cache.??

????????//?Swap?it?in?and?reload?the?page?to?get?the?new?hotness.??

????????????window.applicationCache.swapCache();??

????????????if?(confirm('A?new?version?of?this?site?is?available.?Load?it?'))?{??

????????????????window.location.reload();??

????????????}??

????????}?else?{??

????????????//?Manifest?didn't?changed.?Nothing?new?to?server.??

????????}??

????},?false);??

},?false);??

4.在線狀態檢測和監視

檢測：navigator.onLine 屬性表示當前是否在線，如果為 true，表示在線。如果為 false，表示離線。
監視：當在線/離線狀態切換時，會觸發online/offline事件，這兩個事件觸發在body元素上，并且沿著document.body，document 和 window的順序冒泡。

5.測試

chromw 瀏覽器的自帶測試工具，console會顯示緩存的情況
[html]?view plaincopy

Document?was?loaded?from?Application?Cache?with?manifest?http://localhost/fdipzone/test.appcache?main.html:31??

Application?Cache?Checking?event?main.html:31??

Application?Cache?Downloading?event?main.html:31??

Application?Cache?Progress?event?(0?of?1)?http://localhost/fdipzone/main.html?main.html:31??

Application?Cache?Progress?event?(1?of?1)??main.html:31??

Application?Cache?UpdateReady?event???

6.注意事項

1. 站點離線存儲的容量限制是5M
2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個域下
4. 在manifest中使用的相對路徑，相對參照物為manifest文件
5. CACHE MANIFEST字符串應在第一行，且必不可少
6. 系統會自動緩存引用清單文件的 HTML 文件
7. manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關系，如果是隱式聲明需要在最前面
8. FALLBACK中的資源必須和manifest文件同源
9. 當一個資源被緩存后，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
10. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
11. 當manifest文件發生改變時，資源請求本身也會觸發更新原文地址：http://blog.csdn.net/fdipzone/article/details/12718945

總結

以上是生活随笔為你收集整理的HTML5 实现离线数据缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Html5开发之链接标签nav的用法
下一篇： html5新特性:异步上传文件