這里是修真院前端小課堂，每篇分享文從

【背景介紹】【知識(shí)剖析】【常見問題】【解決方案】【編碼實(shí)戰(zhàn)】【擴(kuò)展思考】【更多討論】【參考文獻(xiàn)】

八個(gè)方面深度解析前端知識(shí)/技能，本篇分享的是：

【 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的緩存使用策略是不同的。

它是瀏覽器自己的一種機(jī)制，隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來，網(wǎng)絡(luò)可靠性降低，如果我們已經(jīng)將需要的文件緩存下下來，一旦網(wǎng)絡(luò)無法訪問，也能繼續(xù)訪問。

而且做好相應(yīng)資源的緩存可以帶來更好的用戶體驗(yàn)，當(dāng)用戶使用自己的流量上網(wǎng)時(shí)，本地緩存不僅可以提高用戶訪問速度，而且大大節(jié)約用戶的使用流量。

2.知識(shí)剖析

什么是Manifest：

其實(shí)Manifest是一個(gè)簡(jiǎn)單的 文本文件，它的擴(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ù)訪問本地緩存。

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)行異常

4.解決方案

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)

8.更多討論

瀏覽器對(duì)離線存儲(chǔ)的大小有限制嗎？

其他的離線存儲(chǔ)各自應(yīng)該在什么情況下使用？

除了這些還有其他能實(shí)現(xiàn)離線存儲(chǔ)的方式嗎？

鳴謝

感謝大家觀看

BY

孫劍立-肖浩宇-楊剛

課后問答：

1.瀏覽器跟蹤時(shí)清除了緩存是否能取消跟蹤？

答：能，這里的緩存其實(shí)不是manifest，而是cookie，清除緩存后，cookie被清除。

2.：cookie有哪些優(yōu)點(diǎn)？

答：他的缺點(diǎn)來自于他的優(yōu)點(diǎn)，因?yàn)閏ookie會(huì)跟蹤瀏覽器發(fā)送http請(qǐng)求，所以通過它可以實(shí)現(xiàn)用戶身份認(rèn)證等一系列功能，也是因?yàn)檫@樣頻繁的發(fā)送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

密碼: va8q

今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~

------------------------------------------------------------------------------------------------------------------------

技能樹.IT修真院

“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！薄?/p>

這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧?！

更多內(nèi)容，可以加入IT交流群565734203與大家一起討論交流

這里是技能樹·IT修真院：https://www.jnshu.com，初學(xué)者轉(zhuǎn)行到互聯(lián)網(wǎng)的聚集地

總結(jié)

以上是生活随笔為你收集整理的html5 离线浏览,HTML5的离线储存怎么使用？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。