HTML5的离线储存
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
如何使用:
1、页面头部像下面一样加入一个manifest的属性;
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
2、在cache.manifest文件的编写离线存储的资源;
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时,操作window.applicationCache进行需求实现。
浏览器怎么解析manifest
那么浏览器是怎么对离线的资源进行管理和加载的呢?这里需要分两种情况来讨论。
在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根 据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然 后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的 资源并进行离线存储。
离线的情况下,浏览器就直接使用离线存储的资源。
这个过程中有几个问题需要注意。
如果服务器对离线的资源进行了更新,那么必须更新manifest文件之后这些资源才能被浏览器重新下载,如果只是更新了资源而没有更新manifest文件的话,浏览器并不会重新下载资源,也就是说还是使用原来离线存储的资源。
对于manifest文件进行缓存的时候需要十分小心,因为可能出现一种情况就是你对manifest文件进行了更新,但是http的缓存 规则告诉浏览器本地缓存的manifest文件还没过期,这个情况下浏览器还是使用原来的manifest文件,所以对于manifest文件最好不要设 置缓存。
浏览器在下载manifest文件中的资源的时候,它会一次性下载所有资源,如果某个资源由于某种原因下载失败,那么这次的所有更新就算是失败的,浏览器还是会使用原来的资源。
在更新了资源之后,新的资源需要到下次再打开app才会生效,如果需要资源马上就能生效,那么可以使用
window.applicationCache.swapCache()
方法来使之生效,出现这种现象的原因是浏览器会先使用离线资源加载页面,然后再去检查manifest是否有更新,所以需要到下次打开页面才能生效。
详细的使用请参考:[有趣的HTML5:离线存储](http://segmentfault.com/a/1190000000732617)HTML5的离线储存
HTML5的离线储存的更多相关文章
- 6,html5的离线储存怎么用
6,html5的离线储存怎么用 客户端:(百科:或称为用户端,是指与服务器相对应,为客户提供本地服务的程序.除了一些只在本地运行的应用程序,一般安装在客户机上,需要与服务端配合运行) 在用户没有和因特 ...
- 浏览器如何对HTML5的离线储存资源进行管理和加载
在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储.如果已经访 ...
- 转 html5离线储存,application cache,manifest使用体验
html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...
- HTML5 的web储存: localStorage & sessionStorage
早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...
- 使用html5的离线缓存技术
突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...
- HTML5:离线存储
最近由于找工作一直没时间也没有精力更新博客,找工作真是一件苦逼的事情啊...不抱怨了,我们来看看HTML5的新特性---离线存储吧. 随着Web App的发展,越来越多的移动端App使用HTML5的方 ...
- 使用HTML5开发离线应用 - cache manifest
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...
- HTML5的离线应用
参考:有趣的HTML5:离线存储——segmentfault HTML5的离线存储 简介 HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个.通过浏览器访问Web App需要联网发送请 ...
- html5的离线存储问题集合
HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...
随机推荐
- 【转】SQL语句中的正则表达示
正则表达式作用是匹配方本,将一个模式(正则表达式)与一个文本串进行比较. MySQL用WHERE子句对正则表达式提供了初步的支持,允许你指定用正则表达式过滤SELECT检索出的数据. MySQL仅支持 ...
- PHP函数ip2long转换IP时数值太大产生负数的解决办法
有两种办法: 1. bindec( decbin($long)) 利用bindec和decbin两个函数转换一次就没有问题了 我一直在用上面的方法,但是在升级到PHP7以后就不起作用了(因为最近只进 ...
- 一、 Socket之UDP异步传输文件
用SCOKET 发送文件是一个不太好处理的问题,网上的例子也都是很简单的,我准备写一个比较完善的例子,这个就算是开始吧,以后的都会在这个例子的基础上进行修改,准备实现多线程传输.断点传输和文件传输的完 ...
- com.domain.bean
package com.domain.bean; import java.util.LinkedHashMap; import java.util.Map; public class TmpBean ...
- SOAP 及其安全控制--转载
原文地址:http://my.oschina.net/huangyong/blog/287791 目录[-] 1. 基于用户令牌的身份认证 2. 基于数字签名的身份认证 3. SOAP 消息的加密与解 ...
- 将字符串写进txt中方式
try { File file = new File(filePath); PrintStream ps = new PrintStream(new FileOutputStream(file)); ...
- Android_SystemService
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...
- 圆满完成Web安全测试培训课程广州公开班!
圆满完成Web安全测试培训课程广州公开班! http://gdtesting.com/news.php?id=187 下期<Web安全测试最佳实践>公开课通知:8月9.10日地点:广州 课 ...
- tomcat安装与配置文件
一 安装tomcat 1.系统必须已安装配置JDK 安装说明参考地址:http://www.cnblogs.com/Yuanbangchen/p/5945491.html 2.将apache-to ...
- 关于@see注解
所有三种类型的注释文档都可包含@see标记,它允许我们引用其他类里的文档.对于这个标记,javadoc会生成相应的HTML,将其直接链接到其他文档.格式如下: @see 类名@see 完整类名@see ...