h5---API-----离线缓存

          本地数据的存储。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');

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,914评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,935评论 2 383
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,531评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,309评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,381评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,730评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,882评论 3 404
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,643评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,095评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,448评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,566评论 1 339
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,253评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,829评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,715评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,945评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,248评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,440评论 2 348

推荐阅读更多精彩内容