WebStorage(1)__<本地数据,离线缓存>

一、离线缓存

网络状态：

浏览器的网络状态是否畅通与网线是否连接没有关系，只要设备的网卡在活动，那么网络就是畅通的。

 

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格式的特殊字符串。

获取数据时再还原成对象：