首頁技術(shù)文章正文

HTML5的離線存儲(chǔ)怎么使用,工作原理是什么?

更新時(shí)間:2021-05-10 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

在用戶沒有與因特網(wǎng)連接時(shí),可以正常訪問站點(diǎn)或應(yīng)用,在用戶與因特網(wǎng)連接時(shí),更新用戶機(jī)器上的緩存文件。

原理:HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù)),通過這個(gè)文件上的解析清單離線存儲(chǔ)資源,這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí),瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示。


如何使用:

1、頁面頭部像下面一樣加入一個(gè)manifest的屬性;

2、在cache.manifest文件的編寫離線存儲(chǔ)的資源;

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
//offline.html

3、在離線狀態(tài)時(shí),操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。



猜你喜歡:

HTML中的src與href屬性有哪些區(qū)別?

HTML5畫布中線的樣式是怎樣設(shè)置的?

XML和HTML有什么區(qū)別和不同?

HTML5頁面頭部信息相關(guān)標(biāo)簽是如何編輯的?

黑馬程序員前端培訓(xùn)課程

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!