离线存储
时间:2022-05-04
本文章向大家介绍离线存储,主要内容包括什么是离线缓存、为何要用离线缓存、离线缓存的设置步骤、manifest文件的配置、2. manifest文件的基本组成、离线缓存工作流程图、使用JavaScript控制缓存、2. 涉及缓存的事件、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
什么是离线缓存
离线缓存,就是将指定的网页文件(例如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);
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android编程实现自定义渐变颜色效果详解
- ES11屡试不爽的新特性,你用上了几个?
- Android设计模式之策略模式详解
- Android实现类似iOS风格的对话框实例代码
- Android 给图片加上水印的示例代码(支持logo+文字)
- Android studio 下JNI编程实例并生成so库的实现代码
- Android实现简单时钟View的方法
- Android编程之创建自己的内容提供器实现方法
- Android自定义View圆形和拖动圆、跟随手指拖动效果
- Android开发之OkHttpUtils的具体使用方法
- Xshell5连接虚拟机中的Linux的方法以及失败原因解决
- Android 多线程的实现方法总结
- Android编程之SQLite数据库操作方法详解
- 浅谈android组件化之ARouter简单使用
- Android ScrollView实现下拉弹回动画效果