大家好习绢，我是IT修真院深圳分院第02期學(xué)員孫劍立污茵，一枚正直善良的web程序員樱报。
今天給大家分享一下，修真院官網(wǎng)CSS任務(wù)15中有關(guān)HTML5的離線儲(chǔ)存怎么使用泞当？
1.背景介紹
HTML5提供了很多新的功能以及相應(yīng)的接口迹蛤，離線存儲(chǔ)就是其中的一個(gè)，離線存儲(chǔ)可以將站點(diǎn)的一些文件存儲(chǔ)在本地，在沒有網(wǎng)絡(luò)的時(shí)候還是可以訪問到以緩存的對(duì)應(yīng)的站點(diǎn)頁面盗飒，其中這些文件可以包括html穷缤，js，css箩兽，img等等文件津肛，但其實(shí)即使在有網(wǎng)絡(luò)的時(shí)候，瀏覽器也會(huì)優(yōu)先使用已離線存儲(chǔ)的文件汗贫，返回一個(gè)200（from cache）頭身坐。這跟HTTP的緩存使用策略是不同的。
2.知識(shí)剖析
什么是Manifest：
其實(shí)Manifest是一個(gè)簡單的 文本文件落包，它的擴(kuò)展名是任意的部蛇，定義需要緩存的文件、資源咐蝇，當(dāng)?shù)谝淮未蜷_時(shí)涯鲁，瀏覽器會(huì)自動(dòng)緩存相應(yīng)的資源。
Manifest 的特點(diǎn)：
離線瀏覽：即當(dāng)網(wǎng)絡(luò)斷開時(shí)有序，可以繼續(xù)訪問你的頁面抹腿。
訪問速度快：將文件緩存到本地，不需每次都從網(wǎng)絡(luò)上請(qǐng)求旭寿。
穩(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í)将饺，瀏覽器會(huì)解析該頁面中的mainfest，并緩存里面列舉的資源云芦，同時(shí)該頁面也會(huì)自動(dòng)會(huì)被瀏覽器緩存俯逾，即使該頁面沒有在Manifest中列出。
接下來詳細(xì)說說manifest的細(xì)節(jié)舅逸，一個(gè)典型的manifest文件代碼結(jié)構(gòu)像下面這樣：
這個(gè)文件中存儲(chǔ)了服務(wù)器希望緩存的文件列表:
CACHE MANIFEST
#上面一句必須
#v1.0.1
#需要緩存的文件
CACHE:
test.html
test.js
doraemon.jpg
#不需要緩存的文件
NETWORK:
test.css
#無法訪問頁面
FALLBACK:
404.html
以#號(hào)開頭的是注釋桌肴，可以是版本號(hào)，時(shí)間戳等等琉历。一般會(huì)在這寫個(gè)版本號(hào)坠七，用來在緩存的文件更新時(shí)水醋，更改manifest的作用：瀏覽器已經(jīng)緩存下來的緩存，只有當(dāng)manifest文件發(fā)生了改變才會(huì)更新本地緩存彪置，即使你的代碼發(fā)生了更新拄踪，本地瀏覽器也是不知道的，所以每次發(fā)布代碼時(shí)你可以更改下#后面的信息比如版本號(hào)或者時(shí)間拳魁，告訴瀏覽器相應(yīng)的更新本地緩存惶桐。
2.更新緩存:
在有網(wǎng)時(shí)，以下條件觸發(fā)緩存的更新
用戶清空瀏覽器緩存
manifest 文件被修改
由程序來更新應(yīng)用緩存
3.常見問題
離線存儲(chǔ)有什么優(yōu)缺點(diǎn)潘懊？
優(yōu)點(diǎn)
離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源姚糊。
缺點(diǎn)
更新的資源，需要二次刷新才會(huì)被頁面采用
不支持增量更新授舟，只有manifest發(fā)生變化救恨，所有資源全部重新下載一次
缺乏足夠容錯(cuò)機(jī)制，當(dāng)清單中任意資源文件出現(xiàn)加載異常释树，都會(huì)導(dǎo)致整個(gè)manifest策略運(yùn)行異常
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
存儲(chǔ)網(wǎng)頁數(shù)據(jù)的方式肠槽？
localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)(永久),對(duì)于同一個(gè)瀏覽，當(dāng)用戶關(guān)閉瀏覽器窗口后奢啥，數(shù)據(jù)不會(huì)被刪除秸仙。
sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)(sesion/),當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除扫尺。
cookie：不適合大量數(shù)據(jù)的存儲(chǔ)筋栋，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來傳遞，這使得 cookie 速度很慢而且效率也不高正驻。
7.參考文獻(xiàn)
參考二:MDN-manifest
參考三:知乎-關(guān)于前端緩存優(yōu)化，為什么沒人用manifest抢腐？
8.更多討論
瀏覽器對(duì)離線存儲(chǔ)的大小有限制嗎姑曙？
其他的離線存儲(chǔ)各自應(yīng)該在什么情況下使用？
除了這些還有其他能實(shí)現(xiàn)離線存儲(chǔ)的方式嗎迈倍？
ppt鏈接：PPT
視頻鏈接：視頻
鳴謝
感謝大家觀看
BY : 孫劍立-肖浩宇
今天的分享就到這里啦伤靠，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)啼染、留言宴合、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始迹鹅，找個(gè)師兄卦洽，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏斜棚，學(xué)習(xí)的路上不再迷梅У伲”该窗。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線蚤霞，學(xué)習(xí)透明化酗失，成長可見化，師兄1對(duì)1免費(fèi)指導(dǎo)昧绣」骐龋快來與我一起學(xué)習(xí)吧?！
請(qǐng)點(diǎn)擊鏈接【修真院】
