花美男为中国互联网事业而奋斗

HTML5的离线储存

来源:未知 阅读(0)次 评论(0)

在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。

原理

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。

离线的情况下,浏览器就直接使用离线存储的资源。


使用

1、页面头部像下面一样加入一个manifest的属性;

2、在cache.manifest文件的编写离线存储的资源;

CACHE MANIFEST
 #v0.11 
CACHE:
js/app.js
css/style.css
NETWORK: 
resourse/logo.png
FALLBACK:   
/ /offline.html

3、在离线状态时,操作window.applicationCache进行需求实现。




详细的使用请参考:有趣的HTML5:离线存储

标签:HTML5离线储存
上一篇:HTML结构语义化 下一篇:没有了

相关推荐