首页 > 代码库 > HTML5 离线存储应用案例
HTML5 离线存储应用案例
HTML5 所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作；
下面简单来使用一下离线存储：
第一：要在 apche 服务器的 httpd.conf文件中添加下面这段话
AddType text/cache-manifest .manifest
第二：建一个 1.manifest 文件， 然后这里的清单是
#下面这句话必须存在，而且必须放在头部
CACHE MANIFEST
#下面这句话指明要缓存的内容
CACHE
#声明用于指定无需缓存的文件
NETWORK
#这个声明允许你在资源不可用的情况下，将用户重定向特定的文件
FALLBACK
CACHE MANIFESTCACHE:index.html1.cssNETWORK:1.jpgFALLBACK: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/:1Application Cache Checking event localhost/:1Application Cache Downloading event localhost/:1Application Cache Progress event (0 of 3) http://localhost/HTML5/offlineCache/1.css localhost/:1Application Cache Progress event (1 of 3) http://localhost/HTML5/offlineCache/index.html localhost/:1Application Cache Progress event (2 of 3) http://localhost/HTML5/offlineCache/ localhost/:1Application Cache Progress event (3 of 3) localhost/:1Application Cache UpdateReady event
第六：接下来就可以断网去测试一下是否成功吧、也可以停掉自己的服务器然后访问自己的存储页面，如果离线之后图片没有显示，而#box的样式却存储了下来，那么恭喜你已经实现了离线存储功能，H5离线存储还提供了一些 API 和 javascript 方法，朋友们可以自行去了解查看、
HTML5 离线存储应用案例