离线存储

什么是离线缓存

离线缓存,就是将指定的网页文件(例如css、js)保存到本地,当用户没有网络时,依旧可以通过浏览器使用这些文件。

为何要用离线缓存

从网站所有者的角度来说,增加离线缓存功能,能够让用户更好的使用网站。

离线缓存的设置步骤

1 配置manifest文件

2 通过JS进行缓存的控制

manifest文件的配置

1. 添加manifest属性

将需要离线缓存的文件罗列下来,存储于后缀名为manifest的文件当中, 在HTML文件中引入manifest文件。

<html manifest="h5course.manifest">

2. manifest文件的基本组成

基本语法:

  1. CACHE MANIFEST
  2. # 该符号后面的内容为注释信息,第一行的CACHE MANIFEST不能少
  3. CACHE:
  4. # 需要缓存的文件
  5. NETWORK:
  6. # 不需要缓存的文件
  7. FALLBACK:
  8. # 当页面无法访问时的回退页面/重定向

代码实例:

  1. CACHE MANIFEST
  2. CACHE:
  3. ../test.html
  4. ../css/reset.css
  5. ../css/test.css
  6. # 需要注意的是:manifest文件中书写的路径,是以该文件的路径为基础,而非以html所在文件夹为基础
  7. NETWORK:
  8. ../images/logo.jpg
  9. 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);

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-10-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏加米谷大数据

加米谷:Kafka Connect如何运行管理

上节讲述了Kafka OffsetMonitor:监控消费者和延迟的队列,本节更详细的介绍如何配置,运行和管理Kafka Connect,有兴趣的请关注我们的公...

3697
来自专栏张善友的专栏

Windows Server 2008 与 .NET Framework 的版本之间有什么关系

Windows Server 2008就要上市了,用虚拟机安装了两个版本的,一个Server Core的,也就是类Unix的命令行管理的版本,另一个是企业板。I...

17210
来自专栏肖洒的博客

【MOOC】Python网络爬虫与信息提取

Python网络爬虫与信息提取-北京理工大学-嵩天 发布大学:北京理工大学 发布课程:Python网络爬虫与信息提取 授课老师:嵩天 课程简介:“The web...

602
来自专栏GopherCoder

『No17: gin-swagger 构建自动化文档』

重要,前后端的交互一般流程是这样的,后端暴露出API后,交给前端,前端根据API的响应,编写前端页面,一定程度上API 是前后端的交互桥梁。

1001
来自专栏Grace development

PHP-FPM进程配置算法

291
来自专栏PhpZendo

Laravel 请求生命周期

当需要使用一个框架、工具或者服务时,在使用前应对其运行原理进行研究。随着原理研究工作的不断深入,能让我们在使用时更得心应手。

351
来自专栏数据之美

Python RPC 远程调用脚本之 RPyC 实践

最近有个监控需求,需要远程执行集群每个节点上的脚本,并获取脚本执行结果,为了安全起见不需要账号密码登陆节点主机,要求只需要调用远程脚本模块的方法就能实现。 总结...

2556
来自专栏pangguoming

Android 6.0 Permission权限与安全机制

Marshmallow版本权限修改   android的权限系统一直是首要的安全概念,因为这些权限只在安装的时候被询问一次。一旦安装了,app可以在用户毫不知晓...

3364
来自专栏三杯水

OpenResty Codis集群缓存系统

部署环境 OpenResty1.12.5 Codis3.2集群(客户端不支持Redis集群协议故选择了Codis集群) Nginx1.12.1反向代理 ...

833
来自专栏逸鹏说道

ASP.NET5 Beta8可用性

ASP.NET5 beta8现已上都的NuGet作为一个工具升级到Visual Studio2015!此版本极大地扩展.NET核心对OS X和Linux所支持的...

35216

扫描关注云+社区