相似存儲(chǔ)

localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失； sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。

離線的存儲(chǔ)：

service-worker 的標(biāo)準(zhǔn)。

在用戶沒有與因特網(wǎng)連接時(shí)，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件。

原理：

HTML5 的離線存儲(chǔ)是基于一個(gè)新建的 appcache 文件的緩存機(jī)制（不是存儲(chǔ)技術(shù)），通過這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像 cookie 一樣被存儲(chǔ)了下來。

之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示。如何使用。

1、頁面頭部像下面一樣加入一個(gè) manifest 的屬性。

2、在 cache.manifest 文件的編寫離線存儲(chǔ)的資源。

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

• CACHE: 表示需要離線存儲(chǔ)的資源列表，由于包含 manifest 文件的頁面將被自動(dòng)離線存儲(chǔ)，所以不需要把頁面自身也列出來。
• NETWORK: 表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會(huì)被離線存儲(chǔ)，所以在離線情況下無法使用這些資源。不過，如果在 CACHE 和 NETWORK 中有一個(gè)相同的資源，那么這個(gè)資源還是會(huì)被離線存儲(chǔ)，也就是說 CACHE 的優(yōu)先級更高。
• FALLBACK: 表示如果訪問第一個(gè)資源失敗，那么就使用第二個(gè)資源來替換他，比如上面這個(gè)文件表示的就是如果訪問根目錄下任何一個(gè)資源失敗了，那么就去訪問 offline.html 。

3、在離線狀態(tài)時(shí)，操作 window.applicationCache 進(jìn)行需求實(shí)現(xiàn)。

service-worker

如何更新緩存：

（1）更新 manifest 文件。

（2）通過 javascript 操作。

（3）清除瀏覽器緩存。

注意事項(xiàng)：

（1）瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn) 5MB）。

（2）如果 manifest 文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。

（3）引用 manifest 的 html 必須與 manifest 文件同源，在同一個(gè)域下。

（4）FALLBACK 中的資源必須和 manifest 文件同源。

（5）當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請求這個(gè)絕對路徑也會(huì)訪問緩存中的資源。

（6）站點(diǎn)中的其他頁面即使沒有設(shè)置 manifest 屬性，請求的資源如果在緩存中也從緩存中訪問。

（7）當(dāng) manifest 文件發(fā)生改變時(shí)，資源請求本身也會(huì)觸發(fā)更新。