離線應(yīng)用和本地存儲(chǔ)
一、離線緩存
網(wǎng)絡(luò)狀態(tài):
瀏覽器的網(wǎng)絡(luò)狀態(tài)是否暢通與網(wǎng)線是否連接沒(méi)有關(guān)系,只要設(shè)備的網(wǎng)卡在活動(dòng),那么網(wǎng)絡(luò)就是暢通的。
1.通過(guò)navigator.onLine的值判斷
true:網(wǎng)絡(luò)暢通
false:網(wǎng)絡(luò)斷開(kāi)
2 給window對(duì)象添加事件,可以動(dòng)態(tài)地監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)的變化:
window.addEventListener(“online”,onlineCallback);
window.addEventListener(“offline”,offlineCallback);


如何使頁(yè)面可以離線使用:
1.在服務(wù)器中準(zhǔn)備離線清單文件
2.在需要緩存的html文件的html標(biāo)簽中配置manifest屬性。

清單文件的格式:

離線緩存原理圖(重點(diǎn))

二、本地?cái)?shù)據(jù)存儲(chǔ)
1.Cookie
Cookie是服務(wù)器存放在瀏覽器客戶端的一些數(shù)據(jù)文件,這些文件最大只能裝4kb的數(shù)據(jù)。
2.WebStorage
是HTML5提供了本地?cái)?shù)據(jù)存放的API,
WebStorage分為localStorage和sessionStorage,它們的用法完全相同,只是存放數(shù)據(jù)的時(shí)間不同。SessionStorage保存的數(shù)據(jù)在瀏覽器關(guān)閉之后就會(huì)被刪除。而localStorage是永久存放的。除非認(rèn)為刪除。
API:
1. 使用setItem函數(shù)“key/value”的形式,存放數(shù)據(jù)
window.localStorage.setItem(‘username’,‘張三’);
2. 使用getItem函數(shù)根據(jù)指定key獲取value
window.localStorage.getItem(‘username’);
3. 通過(guò)key函數(shù)獲取指定位置的鍵
window.localStorage.key(index);
4. length屬性可以獲取storage中數(shù)據(jù)的條數(shù)
5. 通過(guò)key,刪除對(duì)應(yīng)的value
window.localStorage.removeItem(‘username’);
6. 刪除所有的數(shù)據(jù)
window.localStorage.clear();
注意,webStorage只能存放字符串。
如果想存放對(duì)象,必須先轉(zhuǎn)換為JSON格式的特殊字符串。

獲取數(shù)據(jù)時(shí)再還原成對(duì)象:

浙公網(wǎng)安備 33010602011771號(hào)