当我们浏览web页面时，是不是希望它也能够像桌面应用程序一样，在没有连线的情况下依然能够访问，打开页面的时候不用去等待，如今，HTML5离线存储实现了我们这个愿望。
那么，原始网页是如何工作的呢？这个问题也许你们会问。以下就是原始网页的生命周期：
一、 打开。网页会向服务器请求数据，其中有图片，JS文件，CSS文件。。。，即使不包括网页的主要内容，这些文件加起来的大小就能达到500KB左右，这个 还是保守估算，试想，我们平时的网络好的时候也不过200kb/s，那么加载这些必要的资源就要花去2、3秒的时间。网络不好的时候，就算是100kb /s,我们还要等5秒过后才能看到所有的网页内容。
二、解析。CSS文件和JS文件边下载边解析，如果不是代码问题的话解析速度是非常快的，一般需要几十毫秒，可以忽略不计。
三、缓存。下载的图片，JS文件，CSS文件。。。浏览器会在我们的硬盘空间上缓存这些内容，而一个域名下的文件也只能由同一个域名的链接来读取，所以我们打开一个网页后，再去打开这个网站下另一个网页会非常快就是这个原因：有部分内容已经缓存了，不用下载。
四、 关闭。这里的关闭是指浏览器的关闭，浏览器的关闭为原始网页的生命划上了句号，不再与服务器有任何关联，本地硬盘上也不存在网页的任何资源，除了浏览器保 留的历史记录和cookie.也许有人就会问，不是还有cookie吗，可以把网页的资源保存到cookie中啊，很遗憾，cookie只是一个文本文 件，只能保存字符，而且只有4KB大小（现在知道为什么叫cookie【小甜饼】了吧）。
说了那么多，我们好像偏题了，不是讲HTML5离线应用架设么，好，我们转回正题。
首先罗列一下离线存储的优点：
1、 可以离线访问。
2、web页面访问速度惊人。因为网页资源存储在本地，不用下载，直接打开。
3、降低服务器的压力。 离线应用只加载被修改过的资源，因此大大降低了用户请求对服务器造成的负载压力，对于一个流量巨大的网站来说是非常可观的。
HTML5离线存储程序的开发要做三方面的工作：
一、设置服务器MIME类型。
apache的配置：
找到 D:\lamp\apache\conf/httpd.conf 添加:AddType text/cache-manifest .appcache
Ngnix服务器的配置：
1. 找到Ngnix服务器配置文件mime.types
2. 编辑mime.types
root@mdev conf # vi mime.types
3. 添加manifest文件映射
types {
text/html html htm shtml;
text/css css;
text/xml xml rss;
image/gif gif;
image/jpeg jpeg jpg;
application/x-javascript js;
application/atom+xml atom;
text/mathml mml;
text/plain txt;
text/vnd.sun.j2me.app-descriptor jad;
text/vnd.wap.wml wml;
text/x-component htc;
image/png png;
image/tiff tif tiff;
image/vnd.wap.wbmp wbmp;
image/x-icon ico;
image/x-jng jng;
image/x-ms-bmp bmp;
image/svg+xml svg;
application/java-archive jar war ear;
application/mac-binhex40 hqx;
application/msword doc;
application/pdf pdf;
application/postscript ps eps ai;
application/rtf rtf;
application/vnd.ms-excel xls;
application/vnd.ms-powerpoint ppt;
application/vnd.wap.wmlc wmlc;
application/vnd.wap.xhtml+xml xhtml;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-RedHat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/zip zip;
application/octet-stream bin exe dll;
application/octet-stream deb;
application/octet-stream dmg;
application/octet-stream eot;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/midi mid midi kar;
audio/mpeg mp3;
audio/x-realaudio ra;
video/3gpp 3gpp 3gp;
video/mpeg mpeg mpg;
video/quicktime mov;
video/x-flv flv;
video/x-mng mng;
video/x-ms-asf asx asf;
video/x-ms-wmv wmv;
video/x-msvideo avi;
application/x-nokia-widget wgz;
#最后这里加上下面这句
text/cache-manifest mf appcache
}
二、编写离线清单。离线清单是一个文本文件，以.appcache为后缀。离线清单内容结构如下：
CACHE MANIFEST –这一行必须写，表示要存储的内容
#verson329.41
http://189pic.21cn.com/iptv/new/media/bgm2.mp3
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css
http://code.jquery.com/jquery-1.6.4.min.js
images/1.jpg
../kuayu.rar
dialog.html
NETWORK: –可选的，表示必须在线访问的资源，*表示除了CACHE MANIFEST 中的内容都要在线访问。
*
FALLBACK: –离线文件无法访问时备用页面
404.htm
三、在HTML文档的<html >添加manifest属性，如：
<!doctype html>
<html manifest=”manifest.appcache”>
<head>
<meta charset=”utf-8″>
<title>无标题文档</title>
<script src=”http://code.jquery.com/jquery-1.6.4.min.js” type=”text/javascript”></script>
</head>
<body>
</body>
</html>
经过以上三步，就能完成离线存储的基本要求了，就是把线上资源存储到本地，下载访问时不用下载，直接从本地读取。
做到这里，你们可能就想到了，那么服务器资源更新了，离线应用如何同时更新呢，这个问题问得好，说明你们已经深入思考了。
使 用HTML5离线存储技术的存储的文件，无论在服务器上如何更新，它都不会跟着改变的，除非清单文件manifest.appcache内容有所不同，没 错，有所不同，哪怕只有一个字符的增加或者删除。其原理就在于访问离线应用时，浏览器都首先会从服务器上加载新的清单，然后与旧的清单一一比较，发现有所 不同时（哪怕只是一个空格）就把清单文件资源重新下载过。重新下载过的资源不会立刻体现在页面上，除非使用HTML5离线接口。
支持HTML5离线存储的浏览器都有一个applicationCache对象，有一套方法和事件用于响应离线存储的各个需求。离线应用可以使用程序来控制版本更新。
if(window.applicationCache){//浏览器支持离线存储
var appCache=window.applicationCache;
appCache.update();//强制发起更新请求，比较清单文件
if(appCache.status=window.applicationCache.updateready){//清单有变化，且更新完毕
appCache.swapCache();//切换到最新的缓存
window.location.reload();
}
}
但 是，这只是在清单文件有变化的情况下更新内容，我们总不能每分每秒更新清单文件吧，没错，这里离线应用跟普通网页在设计上有着很大的区别，我们要实时同步 服务器内容，就要用到Ajax,本地存储localStorage。可以用localStorage存储上一次网页内容，页面初始化的时候可以用 window.navigator.onLine=”true”来判断是否在线，在线就用ajax从服务器加载新的内容，离线则读取 localStorage中的内容。关于localStorage，又是另一个话题了，将会继续更新。。。
