本地数据的存储。h5新接口的关于数据的存储。上一章,我们讲到,数据的离线缓存技术。是通过manifest文件来进行离线缓存的。在以往的网站,h5之前,所有的网页要联网进行访问。如果,没有网络的连接是不能访问的。所以,在h5后,增加了一个接口就是manifest。我们可以建个新的文件,通过这个接口,建个后缀名为manifest的文件。
manifest.manifest 这样的文件,可以在文件里增加需要缓存的文件,在浏览器中,就可以按照manifest对应的规则来缓存对应的文件。首先,在html中,在html标签中,通过manifest引入对应的manifest的文件。即:<html manifest='manifest.manifest'> 这样,就可以关联起来了。(通过manifest标签来进行关联)我们可以通过这样的形式来在连不上网的时候,我们可以为客户进行缓存文件的。
我们可以在manifest.manifest文件里面进行写入数据。进入数据的缓存。在服务器的请求下,我们可以通过manifest的相关属性来进行缓存数据。然后,在断网的情况下,我们可以通过浏览器的缓存来进行加载我们需要的数据。其优点是,可以离线进行缓存数据,使用应用程序,还可以在浏览器中,加载数据离线应用客服端。还有一个优点就是,一旦要加载的manifest文件出现更新或者是变动,我们的浏览器缓存会检查新的文件,重新加载的改动的文件。
html页面的语法如下:<html manifest = url> url:是指路径。
绝对 URL - 指向另一个网站(比如 href="http://www.example.com/demo.appcache")
相对 URL - 指向网站内的一个文件(比如 href="demo.appcache")
这是要缓存的html文件写法。
在manifest.manifest页面的语法写法: 因为manifest文件是一个文本的内容,其用来告诉浏览器要缓存的内容。所以,我们在manifest文件里,要写浏览器的缓存的内容。
manifest文件要分为三个部分:
第一个是文件的标题:
CACHE MANIFEST
第二个不离线的缓存文件。
NETWORK:
login.asp
第三个是替换的内容。
FALLBACK:
/html/ /404.html
这个是完整的写法。一个完整的manifest的写法。主要是应用到移动端。
检测用户是否上网还是断网的状态是,我们可以利用h5的新事件。是基于window对象下的
online和offline。当网络从离线变为在线时或者是在线变为离线时,分别触发这两个事件。
通过调用update()方法也可以手工干预。
window.applicationCache.update();
// 首先通过navigator.online取得初始状态。
if (navigator.online) {
// 正常工作。
} else {
// 执行离线的状态时的任务。
}
// 判断是离线还是在线
EventUtil.addHandler (window,'online',function(){
alert('online');
})
EventUtil.addHandler (window,'offline',function () {
alert('offline');
})