在HTML5页面应用中，applicationCache对象表示本地缓存。在开发离线应用的过程中，通过调用applicationCache对象的onUpdateReady事件，可以监测到本地缓存释放完成更新。有如下两种手动更新本地的缓存的方法。
(1) 在onUpdateReady事件中，调用swapCache()方法。
(2) 直接调用applicationCache对象的update()方法。
当本地更新缓存时，可以调用applicationCache对象的其他事件来实时监测本地缓存更新的状态
监测本地缓存是否更新，代码如下：
<!doctype html>
<html manifest="test.manifest">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function init(){
window.applicationCache.addEventListener("updateready",function(){
$$("pStatus").style.display = "block";
$$("pStatus").innerHTML = "正在触发updateready事件d。。"
},true);
}
</script>
</head>
<body onLoad="init();">
<fieldset>
<legend>监测updateready事件触发过程</legend>
<p id="pStatus"/>
</fieldset>
</body>
</html>
当触发updateready事件时，标志着对本地缓存进行了更新。通过调用applicationCache对象中的update方法可以手动更新本地缓存，其调用格式如下：
window.applicationCache.update()
如果有可以更新的本地缓存，调用该方法将可以对本地缓存进行更新。那么监测如何是否有可更新的本地缓存，除通过updateready事件监测外，还可以通过调用applicationCache对象中的‘status’属性。该属性有多个值，当该值为‘4’时，表示有可更新的本地缓存。
<!doctype html>
<html manifest="test.manifest">
<head>
<meta charset="utf-8">
<title>用update()更新本地缓存</title>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function init(){
if(window.applicationCache.status == 4){
$$("pStatus").style.display = "block";
$$("pStatus").innerHTML = "正找到可更新的本地缓存。。";
}
}
function btnUdp_click(){
window.applicationCache.update();
$$("pStatus").style.display = "block";
$$("pStatus").innerHTML = "完成手动更新";
}
</script>
</head>
<body onLoad="init();">
<fieldset>
<legend>监测有没有更新，然后并手动更新缓存！</legend>
<p id="pStatus"/>
<p id="pShow">
<input id="btnUpd" value="手动更新" type="button" onClick="btnUdp_click()">
</p>
</fieldset>
</body>
</html>
方法swapCache()的功能是更新本地缓存，与方法update()有如下两点不同。
- 更新本地缓存的事件不一样：方法swapCache()早于方法update()将本地的缓存进行更新；
- 触发事件不一样：方法swapCache()必须在updateready事件中才能更新调用，而方法update()可以随时调用。
<!doctype html>
<html manifest="test.manifest">
<head>
<meta charset="utf-8">
<title>用swapCache更新本地缓存</title>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function init(){
window.applicationCache.addEventListener("updateready",function(){
$$("pStatus").style.display = "block";
$$("pStatus").innerHTML = "找到可更新的本地缓存";
window.applicationCache.swapCache();
$$("pStatus").innerHTML = "完成本地缓存更新";
},true);
}
</script>
</head>
<body onLoad="init();">
<fieldset>
<legend>检测是否有更新并立即更新缓存</legend>
<p id="pStatus"/>
</fieldset>
</body>
</html>
更新本地缓存时触发的其他事件
checking：正在检测是否有更新
downloading：正在下载可用的缓存
noupdate：没有最小的缓存更新
progress：本地缓存正在更新中
cached：本地缓存以更新成功
error：本地缓存更新时出错
相关推荐
HTML5实现的本地缓存localstorage登录效果实例代码.zip
取URL本地缓存地址.rar
javaScript Local Storge高速缓存，简单，简单和定时的高速缓存 如何使用 ？ 包括课程 [removed][removed] 要设置缓存的数据，请使用set函数执行此操作，第一个参数为缓存数据的名称，第二个参数为值 Cache.set('...
ListView展示+上拉刷新下拉加载+本地缓存，有实际的网络接口为例展示，头尾布局简单的添加了下,eclipse做的
一、作用 离线浏览 – 根据文件规则把资源缓存在本地，脱机依然能够访问资源，联网会直接使用缓存在本地的文件。... 再次载入页面时，便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源。 当
主要介绍了vue日历/日程提醒/html5本地缓存功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
PK利剑：14kb大小、单文件、纯缓存、无需任何数据库、实现踢人、审核发言、普通/VIP1/VIP2/管理员等多角色发言功能，支持框架入任何网页中操作。 测试体验步骤： 1、解压缩系统压缩包，得到Default.asp文件； 2...
【将数据存储在本地缓存】wx.setStorage 【读取本地缓存】wx.getStorage 以手机号+密码登录为例，把登录成功返回的token值存储在本地缓存中，然后读取缓存中的token： login.php： <?php header(Content-type:...
强缓存：也称为本地缓存，不向服务器发送请求，直接使用客户端本地缓存数据 协商缓存：也称304缓存，向服务器发送请求，由服务器判断请求文件是否发生改变。如果未发生改变，则返回304状态码，通知客户端直接使用...
主要介绍了浅谈利用缓存来优化HTML5 Canvas程序的性能,并且作者给出了使用缓存以及离屏Canvas后性能较原程序的提升对比,需要的朋友可以参考下
HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势： 离线浏览 – 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源，因此加载速度较快。 ...
代码如下:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML...本地缓存</title> [removed] var strKey = “strKey”; var storage = window.localStorage; function onStart(){ if(storage.getItem(strKey)!=null){
html5的一个非常cool的功能，就是web storage，类似于之前的cookie，不过与之不同的是，web storage 拥有本地5兆的容量可以存储，而cookie却只有4K，这是完全不能比的优势。webstrange又分为：localstorage，...
本地存储-应用-缓存 HTML5 本地存储和应用程序缓存演示 对于应用程序缓存功能，演示文件必须托管在服务器上。 本地存储将直接从文件系统工作。
一个关于html5的技术讲解文档，主要目录如下： 第1章 主要结构 [head] 使用新的html 5结构化元素 使用css样式化html 5 何时使用新的html 5结构化元素 小结 第2章 文本 构造主要内容区域 添加博客...
2、更快的加载速度，缓存在本地访问速度自然更快； 3、减轻服务请求压力，文件缓存后不需要再次请求，只需要请求需要更新的文件。 如何使用？ XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html ...
本地缓存 本地缓存 从 Google Code 项目导入 我不是作者，只是想在 Google Code 关闭时保存脚本 #原始自述文件 在 HTML 5 中，我们得到了 localStorage，这是一种在本地存储名称/值对的快速简便的方法。 但是，与 ...
两次请求相同的一个URL，会产生缓存问题。 博文链接：https://weiye.iteye.com/blog/100470
本文实例讲述了Android开发之删除项目缓存的方法。分享给大家供大家参考，具体如下： 如何删除项目的缓存： getCacheDir()能够得到当前项目的缓存地址 在项目中经常会使用到WebView 控件,当加载html 页面时,会在/...