内容简介：第一次加载后将数据缓存，如果没有清除缓存，下一次没有网络也能加载。2.注意：这并不会重新载入应用程序：所有已经载入的html文件、图片、脚本等资源都不会改变。但是，之后的请求将从最新的缓存中获取。这会导致“版本错乱”的问题，因此一般不推荐使用，除非应用程序设计得很好，确保这样的方式没有问题。
离线缓存
applicationCache
第一次加载后将数据缓存，如果没有清除缓存，下一次没有网络也能加载。
使用
1. 使用 manifest
属性，引入 .appcache
文件
- 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）
-
manifest 文件的 建议
的文件扩展名是：
.appcache
<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2. 编写 demo.appcache
文件
- CACHE MANIFEST 必须的，下面写需要缓存的文件，将在首次下载后进行缓存
-
NETWORK:下面的文件永远不会被缓存，且离线时是不可用的
可以使用星号来指示所有其他资源/文件都需要因特网连接
NETWORK: *
- FALLBACK: 如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件，第一个 url 是资源，第二个是替补
CACHE MANIFEST logo.png main.js NETWORK: index.css FALLBACK: # 访问失败后 重定向 /html5/ /404.html
目前为止就实现了离线缓存
缓存状态
window.applicationCache.status
查看缓存的当前状态
- 0 == UNCACHED === 未缓存
- 1 == IDLE === 空闲（缓存为最新状态）
- 2 == CHECKING === 检查中
- 3 == DOWNLOADING === 下载中
- 4 == UPDATEREADY === 更新就绪
- 5 == OBSOLETE === 缓存过期
相关方法
1. applicationCache.update()
主动更新缓存
//利用定时器隔一定时间自动更新一下缓存
setInterval(function(){
applicationCache.update();
},10000);
2. swapCache()
所有的请求都从新缓存中获取
注意：这并不会重新载入应用程序：所有已经载入的html文件、图片、脚本等资源都不会改变。但是，之后的请求将从最新的缓存中获取。这会导致“版本错乱”的问题，因此一般不推荐使用，除非应用程序设计得很好，确保这样的方式没有问题。
缓存相关事件
1. updateready当有新的缓存，并更新完以后，触发此事件
window.applicationCache.onupdateready = function(){
alert("缓存更新完成");
},false);
2. progress有新的缓存，在下载过程中，会间断性触发
event包含：loaded和total。loaded代表当前已经加载完成的文件，total为总共需要更新的文件数
applicationCache.onprogress = function(e){
alert(applicationCache.status); //3... 3表示正在下载
},false);
3. cached下载完成并且首次将应用程序下载到缓存中时触发
4. updaterady更新完成，下载完成并将缓存中的应用程序更新后触发
触发此事件的时候，用户任然可以看到老版本的应用程序
5. error浏览器处于离线状态，检查清单列表失败
当一个未缓存的应用程序引用一个不存在的清单文件，也会触发此事件
6. obsolete如果一个缓存的应用程序引用一个不存在的清单文件会触发
7. checking正在检查，每次载入一个设置了manifest属性的html文件，浏览器都会触发
8. downloading正在下载
9. noupdate检查更新结束，没有需要更新
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 轻松学会HTTP缓存（强缓存，协商缓存）
- 常见面试题之缓存雪崩、缓存穿透、缓存击穿
- HTTP缓存 - 强缓存/协商缓存/浏览器刷新
- mybatis教程--查询缓存（一级缓存二级缓存和整合ehcache）
- 如何解决Redis缓存雪崩、缓存穿透、缓存并发等5大难题
- 缓存穿透和缓存击穿处理
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
