- 离线检测
首先检查设备是否在线,html5定义了navigator.onLine属性,html5还定义了两个事件:online和offline,在线和离线状态切换变化时会触发。这两个事件在window对象上触发。
if(navigator.onLine ){
//在线
}
else{//离线
}
EventUtil.addHandle(window,"online",function(){
})
- 应用缓存
html5的应用缓存,或者简称为appcache,专门为开发离线应用而设计的,是从浏览器缓存中开辟的一个小缓存,需要使用一个描述文件(manifest file)才能在这块缓存中存储数据,
列出需要下载和缓存的资源:file.css file.js
将描述文件与页面关联起来的方法:
<html manifest ="描述文件的路径">
通过javascript API 中的application cache对象跟踪应用缓存过程的状态,applicationCache的属性status描述状态,其值为常量:
0 -- 无缓存
1 -- 应用缓存未更新
2 -- 正在检查描述文件是否有更新
3 -- 正在下载最新的描述文件
4 -- 更新完成
5 -- 应用缓存的描述文件不存在
应用缓存还有很多相关的事件表示其状态的变化:
checking error noupdate downloading progress upodateready cached
调用applicationCache.swapupdate()启动应用缓存
- 数据存储
直接在客户端上存储用户的信息。
1)Cookie
在进行http请求时在header头部进行cookie值的设置,set-cookie: name=value
cookie包含的内容有:
1)名称,必须经过URL编码
2)值,必须经过URL编码
3)域,cookie对于哪个域是有效地
4)路径,cookie对于有效域下地哪个路径是有效地
5)失效时间,一般式在浏览器会话结束时关闭,但也可以自行设置失效时间
6)安全标志,指定secure,cookie只有在使用SSL连接的时候才发送到服务器
在单个域下cookie设置的数量和所占的字节数都是有限制的。
在javascript读写cookie不是很直观,所以往往需要手动创建函数来简化操作,cookie的常规操作有读取,写入,删除操作。
2)web存储机制
web storage是用来克服由cookie带来的一些限制,web storage的两个主要目标是:提供cookie之外存储会话数据的方式;提供一种可以存储大量会话数据的机制。
- storage类型
storage类型提供最大的存储空间来存储名值对,有如下方法:
clear() -- 删除所有值
getItem(name) -- 根据name获取对应的值
setItem(name,value)
removeItem(name)
key(index) -- 获得index位置处的值
- sessionStorage对象(是storage的一个实例)
存储特定会话的数据,该数据只保存到浏览器关闭。
sessionStorage.getItem(name);
- globalStorage对象
对globalStorage对象的访问是依据页面的协议、域名、端口号来限制的,各个浏览器对存储数据的内容空间有限制。
- localStorage对象
在html5中取代了globalStorage,用于持久保存客户端看数据,localStorage也必须在同源下才可以访问数据。