大家好，我是IT修真院北京分院第22期的學員楊綱，一枚正直純潔善良的WEB前端程序員。
1.背景介紹
HTML5提供了很多新的功能以及相應的接口，離線存儲就是其中的一個，離線存儲可以將站點的一些文件存儲在本地，在沒有網絡的時候還是可以訪問到以緩存的對應的站點頁面，其中這些文件可以包括html，js，css，img等等文件，但其實即使在有網絡的時候，瀏覽器也會優先使用已離線存儲的文件，返回一個200（from cache）頭。這跟HTTP的緩存使用策略是不同的。
它是瀏覽器自己的一種機制，隨著移動互聯網時代的到來，網絡可靠性降低，如果我們已經將需要的文件緩存下下來，一旦網絡無法訪問，也能繼續訪問。
而且做好相應資源的緩存可以帶來更好的用戶體驗，當用戶使用自己的流量上網時，本地緩存不僅可以提高用戶訪問速度，而且大大節約用戶的使用流量。
2.知識剖析
什么是Manifest：
其實Manifest是一個簡單的 文本文件，它的擴展名是任意的，定義需要緩存的文件、資源，當第一次打開時，瀏覽器會自動緩存相應的資源。
Manifest 的特點：
離線瀏覽：即當網絡斷開時，可以繼續訪問你的頁面。
訪問速度快：將文件緩存到本地，不需每次都從網絡上請求。
穩定性：做了Manifest緩存，遇到突發網絡故障或者服務器故障，繼續訪問本地緩存。
3.常見問題
離線存儲有什么優缺點？
優點
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
缺點
更新的資源，需要二次刷新才會被頁面采用
不支持增量更新，只有manifest發生變化，所有資源全部重新下載一次
缺乏足夠容錯機制，當清單中任意資源文件出現加載異常，都會導致整個manifest策略運行異常
4.解決方案
5.編碼實戰
6.擴展思考
存儲網頁數據的方式？
localStorage - 沒有時間限制的數據存儲(永久),對于同一個瀏覽，當用戶關閉瀏覽器窗口后，數據不會被刪除。
sessionStorage - 針對一個 session 的數據存儲(sesion/),當用戶關閉瀏覽器窗口后，數據會被刪除。
cookie：不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
7.參考文獻
參考一:慕課網-manifest
參考二:MDN-manifest
參考三:知乎-關于前端緩存優化，為什么沒人用manifest？
8.更多討論
瀏覽器對離線存儲的大小有限制嗎？
其他的離線存儲各自應該在什么情況下使用？
除了這些還有其他能實現離線存儲的方式嗎？
鳴謝
感謝大家觀看
BY
孫劍立-肖浩宇-楊剛
課后問答：
1.瀏覽器跟蹤時清除了緩存是否能取消跟蹤？
答：能，這里的緩存其實不是manifest，而是cookie，清除緩存后，cookie被清除。
2.：cookie有哪些優點？
答：他的缺點來自于他的優點，因為cookie會跟蹤瀏覽器發送http請求，所以通過它可以實現用戶身份認證等一系列功能，也是因為這樣頻繁的發送cookie，占用了帶寬。
3.manifest怎么用？
http://www.w3school.com.cn/html5/html_5_app_cache.asp
ppt鏈接：https://ptteng.github.io/PPT/PPT/css-15-Html5%20offline%20storage.html
視頻鏈接：https://pan.baidu.com/s/1kUFHKAN
密碼: va8q
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧?！
