前端面試：HTML5 的離線儲(chǔ)存的使用和原理？
相似存儲(chǔ)
localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失； sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
離線的存儲(chǔ)：
service-worker 的標(biāo)準(zhǔn)。
在用戶沒(méi)有與因特網(wǎng)連接時(shí)，可以正常訪問(wèn)站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件。
原理：
HTML5 的離線存儲(chǔ)是基于一個(gè)新建的 appcache 文件的緩存機(jī)制（不是存儲(chǔ)技術(shù)），通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像 cookie 一樣被存儲(chǔ)了下來(lái)。
之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。如何使用。
1、頁(yè)面頭部像下面一樣加入一個(gè) manifest 的屬性。
2、在 cache.manifest 文件的編寫(xiě)離線存儲(chǔ)的資源。
CACHE MANIFEST #v0.11
CACHE:
js/app.js css/style.css NETWORK:
resourse/logo.png FALLBACK:
/ /offline.html- CACHE: 表示需要離線存儲(chǔ)的資源列表，由于包含 manifest 文件的頁(yè)面將被自動(dòng)離線存儲(chǔ)，所以不需要把頁(yè)面自身也列出來(lái)。
- NETWORK: 表示在它下面列出來(lái)的資源只有在在線的情況下才能訪問(wèn)，他們不會(huì)被離線存儲(chǔ)，所以在離線情況下無(wú)法使用這些資源。不過(guò)，如果在 CACHE 和 NETWORK 中有一個(gè)相同的資源，那么這個(gè)資源還是會(huì)被離線存儲(chǔ)，也就是說(shuō) CACHE 的優(yōu)先級(jí)更高。
- FALLBACK: 表示如果訪問(wèn)第一個(gè)資源失敗，那么就使用第二個(gè)資源來(lái)替換他，比如上面這個(gè)文件表示的就是如果訪問(wèn)根目錄下任何一個(gè)資源失敗了，那么就去訪問(wèn) offline.html 。
3、在離線狀態(tài)時(shí)，操作 window.applicationCache 進(jìn)行需求實(shí)現(xiàn)。
service-worker如何更新緩存：
（1）更新 manifest 文件。
（2）通過(guò) javascript 操作。
（3）清除瀏覽器緩存。
注意事項(xiàng)：
（1）瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn) 5MB）。
（2）如果 manifest 文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過(guò)程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。
（3）引用 manifest 的 html 必須與 manifest 文件同源，在同一個(gè)域下。
（4）FALLBACK 中的資源必須和 manifest 文件同源。
（5）當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問(wèn)緩存中的資源。
（6）站點(diǎn)中的其他頁(yè)面即使沒(méi)有設(shè)置 manifest 屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問(wèn)。
（7）當(dāng) manifest 文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新。
