離線應(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ì)象：