大家好，我是IT修真院深圳分院第02期學(xué)員孫劍立，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)CSS任務(wù)15中有關(guān)HTML5的離線儲存怎么使用？
1.背景介紹
HTML5提供了很多新的功能以及相應(yīng)的接口，離線存儲就是其中的一個(gè)，離線存儲可以將站點(diǎn)的一些文件存儲在本地，在沒有網(wǎng)絡(luò)的時(shí)候還是可以訪問到以緩存的對應(yīng)的站點(diǎn)頁面，其中這些文件可以包括html，js，css，img等等文件，但其實(shí)即使在有網(wǎng)絡(luò)的時(shí)候，瀏覽器也會優(yōu)先使用已離線存儲的文件，返回一個(gè)200（from cache）頭。這跟HTTP的緩存使用策略是不同的。
2.知識剖析
什么是Manifest：
其實(shí)Manifest是一個(gè)簡單的 文本文件，它的擴(kuò)展名是任意的，定義需要緩存的文件、資源，當(dāng)?shù)谝淮未蜷_時(shí)，瀏覽器會自動緩存相應(yīng)的資源。
Manifest 的特點(diǎn)：
離線瀏覽：即當(dāng)網(wǎng)絡(luò)斷開時(shí)，可以繼續(xù)訪問你的頁面。
訪問速度快：將文件緩存到本地，不需每次都從網(wǎng)絡(luò)上請求。
穩(wěn)定性：做了Manifest緩存，遇到突發(fā)網(wǎng)絡(luò)故障或者服務(wù)器故障，繼續(xù)訪問本地緩存。
如何使用:
創(chuàng)建一個(gè)和html同名的manifest文件，比如頁面為text.html，那么可以建一個(gè)test.appcache的文件，注意，這里的擴(kuò)展名是任意的。然后給text.html的html標(biāo)簽添加如下屬性即可：
<html manifest="test.appcache">
manifest 標(biāo)簽應(yīng)該包含到你需要緩存資源的頁面，當(dāng)?shù)谝淮未蜷_該頁面時(shí)，瀏覽器會解析該頁面中的mainfest，并緩存里面列舉的資源，同時(shí)該頁面也會自動會被瀏覽器緩存，即使該頁面沒有在Manifest中列出。
接下來詳細(xì)說說manifest的細(xì)節(jié)，一個(gè)典型的manifest文件代碼結(jié)構(gòu)像下面這樣：
這個(gè)文件中存儲了服務(wù)器希望緩存的文件列表:
CACHE MANIFEST
#上面一句必須
#v1.0.1
#需要緩存的文件
CACHE:
test.html
test.js
doraemon.jpg
#不需要緩存的文件
NETWORK:
test.css
#無法訪問頁面
FALLBACK:
404.html
以#號開頭的是注釋，可以是版本號，時(shí)間戳等等。一般會在這寫個(gè)版本號，用來在緩存的文件更新時(shí)，更改manifest的作用：瀏覽器已經(jīng)緩存下來的緩存，只有當(dāng)manifest文件發(fā)生了改變才會更新本地緩存，即使你的代碼發(fā)生了更新，本地瀏覽器也是不知道的，所以每次發(fā)布代碼時(shí)你可以更改下#后面的信息比如版本號或者時(shí)間，告訴瀏覽器相應(yīng)的更新本地緩存。
2.更新緩存:
在有網(wǎng)時(shí)，以下條件觸發(fā)緩存的更新
用戶清空瀏覽器緩存
manifest 文件被修改
由程序來更新應(yīng)用緩存
3.常見問題
離線存儲有什么優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)
離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。
缺點(diǎn)
更新的資源，需要二次刷新才會被頁面采用
不支持增量更新，只有manifest發(fā)生變化，所有資源全部重新下載一次
缺乏足夠容錯(cuò)機(jī)制，當(dāng)清單中任意資源文件出現(xiàn)加載異常，都會導(dǎo)致整個(gè)manifest策略運(yùn)行異常
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
存儲網(wǎng)頁數(shù)據(jù)的方式？
localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(永久),對于同一個(gè)瀏覽，當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)不會被刪除。
sessionStorage - 針對一個(gè) session 的數(shù)據(jù)存儲(sesion/),當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。
cookie：不適合大量數(shù)據(jù)的存儲，因?yàn)樗鼈冇擅總€(gè)對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
7.參考文獻(xiàn)
參考二:MDN-manifest
參考三:知乎-關(guān)于前端緩存優(yōu)化，為什么沒人用manifest？
8.更多討論
瀏覽器對離線存儲的大小有限制嗎？
其他的離線存儲各自應(yīng)該在什么情況下使用？
除了這些還有其他能實(shí)現(xiàn)離線存儲的方式嗎？
ppt鏈接：PPT
視頻鏈接：視頻
鳴謝
感謝大家觀看
BY : 孫劍立-肖浩宇
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長可見化，師兄1對1免費(fèi)指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧?！
請點(diǎn)擊鏈接【修真院】
