离线存储
什么是离线缓存
离线缓存，就是将指定的网页文件（例如css、js）保存到本地，当用户没有网络时，依旧可以通过浏览器使用这些文件。
为何要用离线缓存
从网站所有者的角度来说，增加离线缓存功能，能够让用户更好的使用网站。
离线缓存的设置步骤
1 配置manifest文件
2 通过JS进行缓存的控制
manifest文件的配置
1. 添加manifest属性
将需要离线缓存的文件罗列下来，存储于后缀名为manifest的文件当中， 在HTML文件中引入manifest文件。
<html manifest="h5course.manifest">2. manifest文件的基本组成
基本语法：
- CACHE MANIFEST
- # 该符号后面的内容为注释信息，第一行的CACHE MANIFEST不能少
- CACHE:
- # 需要缓存的文件
- NETWORK:
- # 不需要缓存的文件
- FALLBACK:
- # 当页面无法访问时的回退页面/重定向
代码实例：
- CACHE MANIFEST
- CACHE:
- ../test.html
- ../css/reset.css
- ../css/test.css
- # 需要注意的是：manifest文件中书写的路径，是以该文件的路径为基础，而非以html所在文件夹为基础
- NETWORK:
- ../images/logo.jpg
- FALLBACK
离线缓存工作流程图
使用JavaScript控制缓存
缓存的各类属性和事件，均绑定在“applicationCache”上。
1. 涉及缓存的属性
applicationCache.status
用于表示当前的缓存状态，取值范围为0~5。
0代表未缓存，通常是这些页面没有运用离线缓存技术，就是这个状态。
1代表空闲，当缓存是最新的时候为1，不需要做什么操作。
2代表检查中，即浏览器在检查manifest文件是否为最新。
3代表下载中，当前有更新，并且正在下载。
4代表更新就绪，代表当前有更新，并且已经下载完毕。等待下次载入页面的时候，进行更新。
5代表缓存过期，即找不到正确的缓存文件时候，会变成5。
2. 涉及缓存的事件
update 用于主动更新缓存。
updateready 当有新的缓存，并更新完毕之后，会触发此事件。
progress 进度事件，当进行缓存的下载时，会不断的触发该事件。
progress中的event对象包含：loaded和total。loaded代表当前已经加载完成的文件，total为总共需要更新的文件数。
checking 正在检查。
downloading 正在下载。
obsolete 缓存过期。
cached 空闲，缓存为最新状态。
error 报错。
noupdate 检查更新结束，不需要更新。
部分事件使用案例代码：
// update事件使用案例
applicationCache.update();
// updateready事件使用案例
application.addEventListener('updateready', function(){
console.log('已完成缓存的更新');
}, false);
// progress事件使用案例
application.addEventListener('progress', function(){
console.log(applicationCache.status);
}, false);本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-10-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。