HTML5 离线存储应用案例

浏览数：29 / 时间：2015年06月09日

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 方法，朋友们可以自行去了解查看、

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML5 离线存储应用案例