這裡是修真院前端小課堂，每篇分享文從
【 html5的離線儲存怎麼使用？】
1.背景介紹
html5提供了很多新的功能以及相應的介面，離線儲存就是其中的乙個，離線儲存可以將站點的一些檔案儲存在本地，在沒有網路的時候還是可以訪問到以快取的對應的站點頁面，其中這些檔案可以包括html，js，css，img等等檔案，但其實即使在有網路的時候，瀏覽器也會優先使用已離線儲存的檔案，返回乙個200（from cache）頭。這跟http的快取使用策略是不同的。
它是瀏覽器自己的一種機制，隨著移動網際網路時代的到來，網路可靠性降低，如果我們已經將需要的檔案快取下下來，一旦網路無法訪問，也能繼續訪問。
而且做好相應資源的快取可以帶來更好的使用者體驗，當使用者使用自己的流量上網時，本地快取不僅可以提高使用者訪問速度，而且大大節約使用者的使用流量。
2.知識剖析
什麼是manifest：
其實manifest是乙個簡單的 文字檔案，它的副檔名是任意的，定義需要快取的檔案、資源，當第一次開啟時，瀏覽器會自動快取相應的資源。
manifest 的特點：
離線瀏覽：即當網路斷開時，可以繼續訪問你的頁面。
訪問速度快：將檔案快取到本地，不需每次都從網路上請求。
穩定性：做了manifest快取，遇到突發網路故障或者伺服器故障，繼續訪問本地快取。
3.常見問題
離線儲存有什麼優缺點？
優點離線瀏覽 - 使用者可在應用離線時使用它們
速度 - 已快取資源載入得更快
缺點更新的資源，需要二次重新整理才會被頁面採用
缺乏足夠容錯機制，當清單中任意資源檔案出現載入異常，都會導致整個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怎麼用？
密碼: va8q
HTML5 離線儲存
首先來講解下離線儲存的使用方法，說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。然後cache.manifest檔案的書寫方式，就像下面這樣 cache manifest v0.11 cache css style.css network resourse log...
HTML5 離線儲存
首先來講解下離線儲存的使用方法，說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。manifest cache.manifest html 然後cache.manifest檔案的書寫方式，就像下面這樣 cache manifest v0.11 cache css s...
html5 離線儲存
資料 quzishen manifest檔案 1 cache manifest 2 上面一句必須 manifest檔案內容型別必須配置為text cache manifest傳送到瀏覽器 3 v1.0.0 版本號 如果想更新快取內容,只要修改下manifest檔案即可,如改版本號v1.0.1 45 ...