HTML5 所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作；
下面简单来使用一下离线存储：
第一：要在 apche 服务器的 httpd.conf文件中添加下面这段话
AddType text/cache-manifest .manifest
第二：建一个 1.manifest 文件， 然后这里的清单是
#下面这句话必须存在，而且必须放在头部
CACHE MANIFEST
#下面这句话指明要缓存的内容
CACHE
#声明用于指定无需缓存的文件
NETWORK
#这个声明允许你在资源不可用的情况下，将用户重定向特定的文件
FALLBACK
CACHE MANIFEST CACHE: index.html 1.css NETWORK: 1.jpg FALLBACK: 404.html
第三：在index.html的 html 标签中添加 1.manifest 这个离线存储清单文件
<html manifest="1.manifest">
index.html:<!DOCTYPE html>
<html lang="en" manifest="1.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<title>HTML5离线存储</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div id="box">HTML5 离线存储</div>
<img src="1.jpg" alt="">
</body>
</html>
1.css:
#box{
width:300px;
height:200px;
border:2px solid #ddd;
background:yellow;
}
第四：要注意的是，如果你不更新1.manifest这个文件的话，那么它就会还是下载之前缓存的那些文件的内容，那么如果解决这个问题呢?
只要在 1.manifest 文件中添加一个#或者修改一下这个文件就可以更新到最新的文件了、
第五：如果查看是否实现了离线存储，可以在谷歌浏览器开发者工具中的 Console 控制台中查看一些信息
Document was loaded from Application Cache with manifest http://localhost/HTML5/offlineCache/1.manifest localhost/:1 Application Cache Checking event localhost/:1 Application Cache Downloading event localhost/:1 Application Cache Progress event (0 of 3) http://localhost/HTML5/offlineCache/1.css localhost/:1 Application Cache Progress event (1 of 3) http://localhost/HTML5/offlineCache/index.html localhost/:1 Application Cache Progress event (2 of 3) http://localhost/HTML5/offlineCache/ localhost/:1 Application Cache Progress event (3 of 3) localhost/:1 Application Cache UpdateReady event
第六：接下来就可以断网去测试一下是否成功吧、也可以停掉自己的服务器然后访问自己的存储页面，如果离线之后图片没有显示，而#box的样式却存储了下来，那么恭喜你已经实现了离线存储功能，H5离线存储还提供了一些 API 和 javascript 方法，朋友们可以自行去了解查看、