1.配置缓存文件 cache manifest

MIME TYPE：text/cache-manifest
文件名称：name.appcache
作用：用于配置需要缓存的文件

2.使用方法

在服务器上添加MIME TYPE
在apache virtual host 中添加

[plain] view plaincopy

AddType text/cache-manifest .appcache

创建 name.manifest，文件后缀可自定义，定义后需要在服务器上添加对应的MIME TYPE

[plain] view plaincopy

CACHE MANIFEST
#VERSION 1.0
CACHE:
index.html
./js/jquery.js
./css/style.css
NETWORK:
./upload/
FAILBACK:
./proxy/ proxy.html

CACHE MANIFEST：文件标识
#VERSION 1.0 ：版本号，只是一行注释，但改变可以更新缓存
CACHE：表示要缓存的文件
NETWORK：表示需要连接服务器的文件
FAILBACK：表示当没有响应时的替代方案

<html>标签添加manifest属性

[html] view plaincopy

<html manifest="name.appcache">

3.更新方法

1.自动更新：浏览器在第一次访问时访问应用缓存，之后只会在cache manifest文件发生变化时更新缓存（即使注释变化也会更新，#VERSION 1.0的作用），而cache manifest中的资源文件发生变化则不会触发更新。

2.手动更新：以编程方法更新缓存，先调用applicationCache.update()，此操作尝试更新用户的缓存（前提是cache manifest文件有更改）。然后当applicationCache.status为UPDATEREADY状态时，调用applicationCache.swapCache()即可将原缓存换成新缓存。

代码如下：

[javascript] view plaincopy

var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}

使用update() 和 swapCache() 不会向用户提供更新的资源，只会让浏览器检查是否有新的cache manifest清单，下载指定的更新内容及重新填充应用缓存。因此需要两次加载才能向用户提供新内容。第一次是获得新的应用缓存，第二次是刷新网页内容。

避免重新加载两次的麻烦，可以设置监听器，监听网页加载时updateready的事件。

代码如下：

[javascript] view plaincopy

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);

4.在线状态检测和监视

检测：navigator.onLine 属性表示当前是否在线，如果为 true，表示在线。如果为 false，表示离线。
监视：当在线/离线状态切换时，会触发online/offline事件，这两个事件触发在body元素上，并且沿着document.body，document 和 window的顺序冒泡。

5.测试

chromw 浏览器的自带测试工具，console会显示缓存的情况

[html] view plaincopy

Document was loaded from Application Cache with manifest http://localhost/fdipzone/test.appcache main.html:31
Application Cache Checking event main.html:31
Application Cache Downloading event main.html:31
Application Cache Progress event (0 of 1) http://localhost/fdipzone/main.html main.html:31
Application Cache Progress event (1 of 1) main.html:31
Application Cache UpdateReady event

6.注意事项

1. 站点离线存储的容量限制是5M
2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源，在同一个域下
4. 在manifest中使用的相对路径，相对参照物为manifest文件
5. CACHE MANIFEST字符串应在第一行，且必不可少
6. 系统会自动缓存引用清单文件的 HTML 文件
7. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
8. FALLBACK中的资源必须和manifest文件同源
9. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
10. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
11. 当manifest文件发生改变时，资源请求本身也会触发更新

原文地址：http://blog.csdn.net/fdipzone/article/details/12718945

HTML5 实现离线数据缓存相关推荐

html5 客户端数据缓存机制,深入理解HTML5离线缓存机制
TML5提供了一种离线应用缓存机制,使得网页应用可以离线使用,这种机制在移动端浏览器上支持度非常广,所有版本的android和ios浏览器都能很好的支持.我们可以放心的使用该特性来加速移动端页面的访问 ...
html5 离线资源缓存,html5的离线缓存使用方法
html5的离线缓存使用方法发布时间:2020-06-15 10:51:01 来源:亿速云阅读:109 作者:Leah 这篇文章将为大家详细讲解有关html5的离线缓存使用方法,小编觉得挺实用的, ...
HTML5时代的Web缓存机制
HTML5 之离线应用Manifest 我们知道,使用传统的技术,就算是对站点的资源都实施了比较好的缓存策略,但是在断网的情况下,是无法访问的,因为入口的HTML页面我们一般运维的考虑,不会对其进行缓 ...
使用HTML5开发离线应用 - cache manifest
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...
在Web应用中使用localforage存储离线数据
在现代Web应用中,我们经常会需要在本地存储一些数据,一方面记住用户的一些状态,或个性化设置,尤其是可以缓存一些常用(甚至全部)的数据,实现更加强大和丰富的本地交互体验. 传统上说,我们有多种办法来存 ...
[html] 简述下html5的离线储存原理，同时说明如何使用？
[html] 简述下html5的离线储存原理,同时说明如何使用? 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些 ...
html5离线储存不足,html5的离线存储问题
HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用 ...
HTML5的离线储存
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储 ...
html5的离线存储问题集合
HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...

HTML5 实现离线数据缓存