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