關(guān)于html5的離線存儲(chǔ)，大致可分為：
- localStorage, sessionStorage
- indexedDB
- web sql
- application cache
可以在chrome的debug工具/Resources下產(chǎn)看鲤孵，下面來著重說明一下Application Cache。
訪問流程
當(dāng)我們第一次正確配置app cache后嵌纲，當(dāng)我們?cè)俅卧L問該應(yīng)用時(shí)，瀏覽器會(huì)首先檢查manifest文件是否有變動(dòng)，如果有變動(dòng)就會(huì)把相應(yīng)的變得跟新下來酷麦，同時(shí)改變?yōu)g覽器里面的app cache弹惦，如果沒有變動(dòng)否淤，就會(huì)直接把a(bǔ)pp cache的資源返回，基本流程是這樣的棠隐。
特點(diǎn)
- 離線瀏覽: 用戶可以在離線狀態(tài)下瀏覽網(wǎng)站內(nèi)容
- 更快的速度: 因?yàn)閿?shù)據(jù)被存儲(chǔ)在本地石抡，所以速度會(huì)更快
- 減輕服務(wù)器的負(fù)載: 瀏覽器只會(huì)下載在服務(wù)器上發(fā)生改變的資源
如何使用
首先，我們建立一個(gè)html文件助泽，類似這樣：
<html lang="en" mainfest="index.manifest">
<head></head>
<body></body>
</html>
可能有些代碼看不懂啰扛，我們先看最簡(jiǎn)單的，第一行配置了一個(gè)manifest=”manifest.appcache”（注意是mani不是main）嗡贺，這是使用app cache首先要配置的隐解，然后我們?cè)谶@個(gè)html文件里引入了兩個(gè)img做為測(cè)試用，然后監(jiān)聽了load時(shí)間來查看看application的status暑刃，關(guān)于applicationCache的api厢漩，可以查看。
然后在相同目錄下新建一個(gè)manifest.appcache文件岩臣，注意關(guān)于路徑要和html頁面配置時(shí)一致即可溜嗜。
CACHE MANIFEST
#version 1.3
CACHE:
img/1.jpg
img/2.jpg
test.css
NETWORK:
*
關(guān)于manifest.appcache文件，基本格式為三段： CACHE架谎，NETWORK炸宵，與 FALLBACK，其中NETWORK和FALLBACK為可選項(xiàng)谷扣，而第一行CACHE MANIFEST為固定格式土全，必須寫在前面。
CACHE:（必須）
標(biāo)識(shí)出哪些文件需要緩存会涎，可以是相對(duì)路徑也可以是絕對(duì)路徑裹匙。
例如：aa.css，http://www.baidu.com/aa.js.
NETWORK:（可選）
這一部分是要繞過緩存直接讀取的文件末秃，可以使用通配符＊概页，,也就是說除了上面的cache文件，剩下的文件每次都要重新拉取练慕。例如＊惰匙，login.php技掏。
FALLBACK:（可選）
指定了一個(gè)后備頁面，當(dāng)資源無法訪問時(shí)项鬼，瀏覽器會(huì)使用該頁面哑梳。該段落的每條記錄都列出兩個(gè) URI—第一個(gè)表示資源，第二個(gè)表示后備頁面绘盟。兩個(gè) URI 都必須使用相對(duì)路徑并且與清單文件同源鸠真。可以使用通配符奥此。例如*.html /offline.html弧哎。
有了上面兩個(gè)文件之后還要配置服務(wù)器的mime.types類型雁比，找大盤apache的mime.types文件稚虎，添加
text/cache-manifest .appcache
OK，上面文件配置完成之后偎捎，application cache就可以運(yùn)行了蠢终。
查看console：
可以看到，一下子這么多l(xiāng)og茴她，但是除了4是我們console的log之外寻拂，其他的都是appcache自己打的，因?yàn)槲覀兣渲昧薽anifest丈牢，系統(tǒng)會(huì)默認(rèn)打出appcache的log祭钉。關(guān)于status的值：
然后，通過log己沛，我們看到一些文件已經(jīng)被緩存慌核，我們可以查看chrome Resources來查看：
證明直接從緩存拿去文件：
更新緩存的方式
更新manifest文件
瀏覽器發(fā)現(xiàn)manifest文件本身發(fā)生變化，便會(huì)根據(jù)新的manifest文件去獲取新的資源進(jìn)行緩存申尼。
當(dāng)manifest文件列表并沒有變化的時(shí)候垮卓，我們通常通過修改manifest注釋的方式來改變文件，從而實(shí)現(xiàn)更新师幕。
通過javascript操作
瀏覽器提供了applicationCache供js訪問粟按，通過對(duì)于applicationCache對(duì)象的操作也能達(dá)到更新緩存的目的。
清除瀏覽器緩存
對(duì)于第一種霹粥，我們修改一下manifest文件灭将，把version改為1.4，然后刷新頁面后控。
我們可以發(fā)現(xiàn)庙曙，appcache更新了緩存重新從網(wǎng)絡(luò)上拉去的cache的文件，但是忆蚀，我們?nèi)绻胍吹礁淖兎仨氃俅嗡⑿马撁妗?/p>
對(duì)于第二種方法姑裂，我們首先修改一下我們的js，添加一個(gè)監(jiān)聽事件：
window.applicationCache.addEventListener('updateready', function(){
console.log('updateready!');
window.applicationCache.swapCache();
});
清除瀏覽器緩存再試一次男旗，這次我們?cè)赾onsole里調(diào)用window.applicationCache.update();舶斧，看看發(fā)生了什么：
updateready事件觸發(fā)了，同樣察皇，appcache也更新了緩存茴厉，其中swapCache方法的意思是重新應(yīng)用跟新后的緩存來替換原來的緩存！什荣，到這里后基本的appcache也差不多了矾缓。
注意事項(xiàng)：
站點(diǎn)離線存儲(chǔ)的容量限制是5M
如果manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載稻爬，整個(gè)更新過程將視為失敗穿仪，瀏覽器繼續(xù)全部使用老的緩存
引用manifest的html必須與manifest文件同源，在同一個(gè)域下
FALLBACK中的資源必須和manifest文件同源
當(dāng)一個(gè)資源被緩存后蝶糯，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問緩存中的資源叮趴。
站點(diǎn)中的其他頁面即使沒有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問
當(dāng)manifest文件發(fā)生改變時(shí)友瘤，資源請(qǐng)求本身也會(huì)觸發(fā)更新
