支持离线引用是HTML5 的一个重点。所谓离线Web应用,就是在设备不能上网的情况下仍然可以运行的应用。
1 离线检测
HTML5定义了一个属性,俩个事件:
- navigator.onLine属性,true表示设备可以上网,false表示设备离线
- online
- offline
if(navigator.onLine){
//正常工作
}else{
//执行离线状态时的任务
}
EventUtil.addHandler(window,"online",function(){
alert("Online");
});
EventUtil.addHandler(window,"offline",function(){
alert("Online");
});
2 应用缓存
简称appcache,Appcache就是从浏览器的缓存中分出来的一块缓存区,要做缓存区中保存数据,可以使用一个描述文件(manifest file),列车要下载和缓存的资源
CACHE MANIFEST
#Comment
file.css
file.js
将描述文件与页面关联起来,可以在HTML中的manifest属性中指定这个文件的路径,例如:
<html manifest = "/offline.manifest">
这个文件的MiME类型必须是 text/cache-manifest
3 数据存储
2.3.1Cookie
HTTP Cookie ,通常直接叫做cookie,最初是在客户端用于存储会话信息的。服务器响应头如下:
HTTP/1.1 200 OK
Content-type:text/html
Set-Cookie:name=value
Other-header:other-header-value
浏览器为每个请求添加Cookie HTTP头
GET /index.html HTTP/1.1
Cookie:name=value
Other-header:other-header-value
限制:每个域的cookie总数是有限的
+ 个数
- IE6:20个
- IE7:50个
- Firefox:50
-Opera:30
- Safari和Chrome没有限制
+ 尺寸:大多浏览器都有大约4096B的长度,为了兼容性最好保持在4095B之内。
2.3.2Web存储机制
目标:
- 提供一种在cookie之外存储会话数据的途径
- 提供一种存储大量可以跨会话存在的数据的机制
1 Storage类型
clear():删除所有值
getItem(name):根据指定的名字name获取对应的值
key(index):获取index位置处的值的名字
removeItem(name):删除name指定的名值对
setItem(name,value):为指定name设置一个对应的值
2 sessionStorage对象
sessionStorage对象存储特定于某个会话的数据,也就是该数据只保存到浏览器关闭。这个对象就像会话cookie,也会在浏览器关闭后消失。存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启后依然存在。
因为sessionStorage对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到,所以对多页面应用有限制。
3 globalStorage对象
最初的目的是跨越会话存储数据,但是有特定的访问限制。要使用globalStorage,首先要指定哪些域可以访问数据。通过方括号标记使用属性来实现。
globalStorage["wrox.com"].name = "Nicholas";//保存数据
var name=globalStorage["wrox.com"].name;//获取数据
在这里,访问的是针对域名为wrox.com的存储空间,这个存储空间对于wrox.com及其所有子域都是可以访问的。
对于globalStorage空间的访问,是依据发起请求的页面的域名、协议和端口来限制的,如果使用HTTPS(端口:8080)协议在wrox.com中存储了数据,那么通过HTTP(端口:80)访问wrox.com的页面是不能访问的。
4 localStorage对象
localStorage在HTML 5 规范中作为持久保存客户端数据的方案取代了globalStorage. 与globalStorage不同,不能给localStorage指定任何访问规则,规则是事先定好的,要访问同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一端口,同一协议。
localStorage和globalStorage都要遵循:数据保留到通过JavaScript删除或者是用户清除浏览器缓存。
限制
localStorage:5MB
sessionStorage的限制因浏览器而异:Chrome、Safari:2.5MB;IE8+和Opera:5MB
2.4 IndexedDB
浏览器中保存结构化数据的一种数据库。其思想是创建一套API,方便保存和读取JavaScript对象,同时还支持查询和搜索。
IndexedDB设计的操作完全是异步进行的