HTML5 的離線儲存怎么使用,它的工作原理是什么?
離線存儲指的是:在用戶沒有與因特網(wǎng)連接時,可以正常訪問站點或應(yīng)用,在用戶與因特網(wǎng)連接時,更新用戶機器上的緩存文件。
原理:HTML5 的離線存儲是基于一個新建的 .appcache
文件的緩存機制(不是存儲技術(shù)),通過這個文件上的解析清單離線存儲資源,這些資源就會像 cookie 一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時,瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示
使用方法:?
(1)創(chuàng)建一個和 html 同名的 manifest 文件,然后在頁面頭部加入 manifest 屬性:
<html lang="en" manifest="index.manifest"></html>
(2)在 cache.manifest
文件中編寫需要離線存儲的資源:
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: /
/offline.html
CACHE: 表示需要離線存儲的資源列表,由于包含 manifest 文件的頁面將被自動離線存儲,所以不需要把頁面自身也列出來。
NETWORK: 表示在它下面列出來的資源只有在在線的情況下才能訪問,他們不會被離線存儲,所以在離線情況下無法使用這些資源。不過,如果在 CACHE 和 NETWORK 中有一個相同的資源,那么這個資源還是會被離線存儲,也就是說 CACHE 的優(yōu)先級更高。
FALLBACK: 表示如果訪問第一個資源失敗,那么就使用第二個資源來替換他,比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了,那么就去訪問 offline.html 。
(3)在離線狀態(tài)時,操作 window.applicationCache
進行離線緩存的操作。
如何更新緩存:
(1)更新 manifest 文件
(2)通過 javascript 操作
(3)清除瀏覽器緩存
注意事項:
(1)瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣(某些瀏覽器設(shè)置的限制是每個站點 5MB)。
(2)如果 manifest 文件,或者內(nèi)部列舉的某一個文件不能正常下載,整個更新過程都將失敗,瀏覽器繼續(xù)全部使用老的緩存。
(3)引用 manifest 的 html 必須與 manifest 文件同源,在同一個域下。
(4)FALLBACK 中的資源必須和 manifest 文件同源。
(5)當(dāng)一個資源被緩存后,該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
(6)站點中的其他頁面即使沒有設(shè)置 manifest 屬性,請求的資源如果在緩存中也從緩存中訪問。
(7)當(dāng) manifest 文件發(fā)生改變時,資源請求本身也會觸發(fā)更新。