WebStorage(1)__

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Richard_xx/article/details/77099497


一、离线缓存


网络状态:

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

 

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分为localStoragesessionStorage,它们的用法完全相同,只是存放数据的时间不同。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格式的特殊字符串。


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





展开阅读全文

没有更多推荐了,返回首页