HTML5离线储存功能
将来会有越来越多的人来访问我们的网站，为他们提供基于HTML5的离线储存功能将大大提高网站的可访问度和友好度，接下来通过一个小demo分享一下我学习到的HTML5离线储存技术。
首先讲下它的运行机制，每张需要离线使用的页面都指向一个 .manifest 文件，这个 .manifest 文件罗列了这张页面离线时所需要的资源。当浏览器第一次访问页面时，.manifest 文件会告诉它哪些资源是需要缓存下来的，以便以后离线的时候使用。
首先我们创建一张页面，在页面中添加三张图片作为测试的文件，要在 html 标签中指定一个 .manifest 文件，文件路径是相对.manifest文件而设置的，代码如下：
<!doctype html> <html lang="en" manifest="test.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>HTML5离线存储</h1> <p> <img src="images/t1.gif" alt="HTML5离线存储"> <img src="images/t2.gif" alt="HTML5离线存储"> <img src="images/t3.gif" alt="HTML5离线存储"> </p> </body> </html>
接下来创建一个名为test.manifest的文件（注意后缀名），它的内容如下：
CACHE MANIFEST #v1.0 CACHE: images/t1.gif images/t2.gif images/t3.gif NETWORK: * FALLBACK: //offline.html我们来理解一下manifest文件的内容，文件必须以 CACHE MANIFEST 开头；第二行是一句注释，注明了文件的版本号； CACHE:则是罗列了离线所需要的资源，这些文件的路径都是相对manifest而言的，比如我的测试图片与manifest文件是在同一路径下的，我直接写 “t1.gif” 就可以了； NETWORK:罗列了不需要进行离线存储的资源，相当于一个在线白名单，在有网络的时候会直接跳过这些缓存，如果想要在有网络的情况下及时更新这些资源，可以使用“*”通配符； FALLBACK:这里定义了一个URL模板，它的作用是访问每个页面时都会问“缓存中有这个页面吗？”，如果有则显示缓存页面，如果没有则显示指定的offline.html页面。 其实还有更简单的一种办法，任何指定了manifest文件的页面，浏览器访问过后都会自动将其缓存下来，但是有一点需要注意的是，这样的设置并不会去缓存js、css和图片文件，它只会缓存你的html文件，删掉CACHE:精简后的manifest文件内容如下：
CACHE MANIFEST #v1.0 NETWORK: * FALLBACK: //offline.html下来再说说第二行的注释，这里我表明了文件的版本号，假如我对离线资源文件进行了修改，那么我就要修改这里的版本号，为服务器提供新版本的manifest文件，从而浏览器会重新重发离线存储。 最后我们把文件上传到服务器进行测试，在Firefox下，会提示用户是否启用离线存储，chrome则没有提示会自动触发。
