一、離線緩存
網絡狀態：
瀏覽器的網絡狀態是否暢通與網線是否連接沒有關係，只要設備的網卡在活動，那麼網絡就是暢通的。
1.通過navigator.onLine的值判斷
true：網絡暢通
false：網絡斷開
2. 給window對象添加事件，可以動態地監聽網絡狀態的變化：
window.addEventListener("online",onlineCallback);
window.addEventListener("offline",offlineCallback);
如何使頁面可以離線使用：
1. 在服務器中準備離線清單文件
在需要緩存的html文件的html標籤中配置manifest屬性。
離線緩存原理圖:
二、本地數據存儲
1.Cookie
Cookie是服務器存放在瀏覽器客戶端的一些數據文件，這些文件最大隻能裝4kb的數據。
2.WebStorage
是HTML5提供了本地數據存放的API，
WebStorage分爲localStorage和sessionStorage，它們的用法完全相同，只是存放數據的時間不同。SessionStorage保存的數據在瀏覽器關閉之後就會被刪除。而localStorage是永久存放的。除非認爲刪除。API：
1. 使用setItem函數“key/value”的形式，存放數據
window.localStorage.setItem(‘username’，‘張三’);
2. 使用getItem函數根據指定key獲取value
window.localStorage.getItem(‘username’);
3. 通過key函數獲取指定位置的鍵
window.localStorage.key(index);
4. length屬性可以獲取storage中數據的條數
5. 通過key，刪除對應的value
window.localStorage.removeItem(‘username’);
6. 刪除所有的數據
window.localStorage.clear();
注意，webStorage只能存放字符串。
如果想存放對象，必須先轉換爲JSON格式的特殊字符串。
獲取數據時再還原成對象：
