html5-离线存储

资料：

　w3c : http://www.w3school.com.cn/html5/html_5_app_cache.asp

quzishen : http://blog.csdn.net/quzishen/article/details/7319703

manifest文件：

 1 CACHE MANIFEST
 2 #上面一句必须 (manifest文件内容类型必须配置为text/cache-manifest发送到浏览器);
 3 #v1.0.0 版本号(如果想更新缓存内容,只要修改下manifest文件即可,如改版本号v1.0.1);
 4 
 5 #需要缓存的文件
 6 CACHE:
 7 a.js
 8 b.css
 9 
10 #不需要缓存的文件
11 NETWORK:
12 *
13 
14 #无法访问页面
15 FALLBACK:
16 404.html

View Code

html文件：

 1 <!DOCTYPE html>
 2 <html lang="en" manifest="application.manifest">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7     window.onload = function(){
 8         
 9         if( window.applicationCache ){ //判断是否支持离线应用;
10 
11             if( !navigator.onLine ){  //判断浏览器是否处于在线状态(true/false);
12 
13                 applicationCache.w = function(){
14                    //检查manifest文件是否存在
15                 }
16 
17                 applicationCache.ondownloading = function(){
18                    //检查到有manifest或者manifest文件
19                    //已更新就执行下载操作
20                    //即使需要缓存的文件在请求时服务器已经返回过了
21                 }
22 
23                 applicationCache.onnoupdate = function(){
24                    //返回304表示没有更新，通知浏览器直接使用本地文件
25                 }
26 
27                 applicationCache.onprogress = function(){
28                    //下载的时候周期性的触发，可以通过它
29                    //获取已经下载的文件个数
30                 }
31 
32                 applicationCache.oncached = function(){
33                    //下载结束后触发，表示缓存成功
34                 }
35 
36                 application.onupdateready = function(){
37                    //第二次载入，如果manifest被更新
38                    //在下载结束时候触发
39                    //不触发onchched
40                    alert("本地缓存正在更新中。。。");
41                    if(confirm("是否重新载入已更新文件")){
42                        applicationCache.swapCache();
43                        location.reload();
44                    }
45                 }
46 
47                 applicationCache.onobsolete = function(){
48                    //未找到文件，返回404或者401时候触发
49                 }
50 
51                 applicationCache.onerror = function(){
52                    //其他和离线存储有关的错误
53                 }
54 
55                 //离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本
56                 window.applicationCache.addEventListener('updateready',function(e){
57                     if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
58                         window.applicationCache.swapCache();
59                         
60                         if(confirm("loding new?")){
61                             window.location.reload()
62                         }
63                     }
64                 },false);
65                 
66             }
67         }
68     }
69     </script>
70 </head>
71 <body>
72     
73 </body>
74 </html>

View Code

后记：

项目里没用过，貌似也就移动端可行，不过做demo的感觉这东西有点坑。。。。