隨著Web App的發(fā)展，越來(lái)越多的移動(dòng)端App使用HTML5的方式來(lái)開發(fā)洛波，除了一些HybridApp以外胰舆， 其他一部分Web App還是通過(guò)瀏覽器來(lái)訪問(wèn)的，通過(guò)瀏覽器訪問(wèn)就需要聯(lián)網(wǎng)發(fā)送請(qǐng)求蹬挤，這樣就使得用戶在離線 的狀態(tài)下無(wú)法使用App缚窿，同時(shí)Web App中一部分資源并不是經(jīng)常改變，并不需要每次都向服務(wù)器發(fā)出請(qǐng)求焰扳，出于 這些原因倦零，HTML5提出的一個(gè)新的特性：離線存儲(chǔ)。通過(guò)離線存儲(chǔ)吨悍，我們可以通過(guò)把需要離線存儲(chǔ)在本地的文件 列在一個(gè)manifest配置文件中扫茅，這樣即使在離線的情況下，用戶也可以正常使用App育瓜。
使用方法:
在html標(biāo)簽中引入manifest文件:
HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的葫隙，通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源 ，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)躏仇。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)恋脚，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù) 進(jìn)行頁(yè)面展示
緩存流程:
利用一個(gè)manifest清單文件告知服務(wù)器需要離線的網(wǎng)頁(yè)文件。
在第一次訪問(wèn)網(wǎng)站時(shí)服務(wù)器響應(yīng)manifest文件進(jìn)行緩存钙态。
在第二次訪問(wèn)該網(wǎng)址時(shí)，檢測(cè)是否達(dá)到更新緩存的條件菇晃，否則直接使用緩存文件（即使你修改了服務(wù)器上的文件）册倒。
這個(gè)文件中存儲(chǔ)了服務(wù)器希望緩存的文件列表:
CACHE MANIFEST
上面一句必須
#v1.0.1
CACHE:當(dāng) manifest 文件加載后瀏覽器會(huì)從網(wǎng)站的根目錄下載文件，無(wú)論用戶何時(shí)與因特網(wǎng)斷開連接磺送，這些資源依然是可用的驻子。
test.html
test.js
doraemon.jpg
NETWORK:
#列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
test.css
FALLBACK:
#規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）
404.html
更新緩存:
一旦應(yīng)用被緩存估灿，它就會(huì)保持緩存直到發(fā)生下列情況
用戶清空瀏覽器緩存
manifest 文件被修改
由程序來(lái)更新應(yīng)用緩存
離線存儲(chǔ)有什么優(yōu)缺點(diǎn)崇呵？
優(yōu)點(diǎn)
離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。
2.知識(shí)剖析
這個(gè)文件中存儲(chǔ)了服務(wù)器希望緩存的文件列表:
CACHE MANIFEST
上面一句必須
#v1.0.1
CACHE:當(dāng) manifest 文件加載后瀏覽器會(huì)從網(wǎng)站的根目錄下載文件馅袁，無(wú)論用戶何時(shí)與因特網(wǎng)斷開連接域慷，這些資源依然是可用的。
test.html
test.js
doraemon.jpg
NETWORK:
#列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
test.css
FALLBACK:
#規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）
404.html
更新緩存:
一旦應(yīng)用被緩存犹褒，它就會(huì)保持緩存直到發(fā)生下列情況
用戶清空瀏覽器緩存
manifest 文件被修改
由程序來(lái)更新應(yīng)用緩存
離線存儲(chǔ)有什么優(yōu)缺點(diǎn)抵窒？
優(yōu)點(diǎn)
離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。
缺點(diǎn)
更新的資源叠骑，需要二次刷新才會(huì)被頁(yè)面采用
不支持增量更新李皇，只有manifest發(fā)生變化，所有資源全部重新下載一次
缺乏足夠容錯(cuò)機(jī)制宙枷，如果manifest文件掉房，或者內(nèi)部列舉的某一個(gè)文件不能 正常下載，整個(gè)更新過(guò)程將視為失敗慰丛，瀏覽器繼續(xù)全部使用老的緩存
注意
在此刻使用這里描述的應(yīng)用程序緩存功能高度 正在處于從Web平臺(tái)中被刪除的過(guò)程卓囚。雖然一些瀏覽器 目前仍然支持它，但也許會(huì)在未來(lái)的某個(gè)時(shí)間停止支持璧帝，請(qǐng)盡量不要使用該特性捍岳。
存儲(chǔ)網(wǎng)頁(yè)數(shù)據(jù)的方式？
localStorage - 沒(méi)有時(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)求來(lái)傳遞恤左，這使得 cookie 速度很慢而且效率也不高贴唇。
