在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：本地缓存更新时出错
相关推荐
在现代Web开发中，HTML5（H5）引入了许多新的特性和功能，其中之一就是本地缓存机制，这对于提升用户体验和优化网页性能具有重要意义。本文将深入探讨H5的本地缓存技术，包括其原理、使用场景、优势以及如何在实践中...
"延时加载+静态资源本地缓存"是两种非常有效的技术手段，它们能够帮助我们实现这一目标。本篇文章将详细探讨这两种策略，以及如何将它们应用于实际项目中。 首先，让我们来看看静态资源本地缓存。静态资源通常包括...
本文将深入探讨如何使用WebView加载网页以及本地图片，并解决缓存问题。 一、WebView的基本使用 1. 初始化WebView：首先，我们需要在布局XML文件中添加WebView组件，并在对应的Activity或Fragment中找到该组件。...
3. **搜索缓存文件**：根据URL的哈希值，源码会搜索缓存目录下的文件，寻找与之对应的本地缓存副本。 4. **读取和解析缓存信息**：找到缓存文件后，源码可能还涉及到读取缓存元数据（如文件大小、最后修改时间等）...
这种技术被称为本地缓存，它在现代Web应用中被广泛使用，特别是在离线应用和性能优化方面。 首先，我们需要理解localStorage。localStorage是HTML5引入的一种持久化本地存储机制，它允许Web应用程序在用户的浏览器...
HTML5离线缓存，也称为App Cache，是HTML5引入的一种增强网页应用程序离线运行能力的技术。它允许开发者将一部分网页资源（如HTML、CSS、JavaScript、图片等）存储在本地，使得用户在离线状态下依然能访问这些页面，...
2. **监听网络请求**：通过WKWebView的`WKNavigationDelegate`，可以在加载开始前拦截请求，决定是否从本地缓存读取，或者取消请求。 3. **手动缓存**：对于需要缓存但不支持HTTP缓存的资源，可以使用URLSession...
之后，即使用户在网络不稳定的环境下，浏览器也能从本地缓存中加载这些资源。 然而，需要注意的是，离线缓存有一定的局限性。首先，更新管理较为复杂，因为manifest文件的更改并不会自动触发已缓存资源的更新，需要...
当浏览器或缓存服务器请求资源时，会根据这个时间与本地缓存版本进行比较。 4. **Expires**: 定义了资源的过期时间，同样以GMT格式给出。如果当前时间超过这个时间，浏览器将认为资源过期，需要重新获取。 在实际...
在“HTML5实现的本地缓存localstorage登录效果实例代码.zip”这个压缩包中，我们可以期待找到一个展示如何利用Local Storage来实现在用户登录后保持登录状态的示例。这个实例对于开发者来说非常有价值，因为它能帮助...
在本项目中，"ListView展示+上拉刷新下拉加载+本地缓存"的实现，意味着开发者旨在提供一个功能丰富的用户界面，不仅能够加载初始数据，还支持用户通过上拉操作加载更多内容（下拉加载），同时对数据进行本地缓存，以...
当网络断开时，浏览器会从本地缓存中加载这些资源，从而实现离线访问。 2. **Application Cache API** Application Cache API 是HTML5提供的一种机制，用于管理离线缓存。它包括四个主要的状态：UNCACHED、IDLE、...
标题中的“一个可以将静态资源jscss缓存到本地localStorage的小工具”指的是一个JavaScript应用程序，它的主要功能是帮助开发者将网站的静态资源，如JavaScript（js）和样式表（css）文件，存储在用户的浏览器本地...
javaScript Local Storge高速缓存，简单，简单和定时的高速缓存 如何使用 ？ 包括课程 [removed][removed] 要设置缓存的数据，请使用set函数执行此操作，第一个参数为缓存数据的名称，第二个参数为值 Cache.set('...
一旦网络断开，浏览器将从本地缓存中加载这些资源，而不是尝试从服务器重新获取。 另一个优势是性能提升，因为缓存的资源可以直接从本地读取，避免了网络延迟，从而加快页面加载速度。此外，由于减少了对服务器的...
HTML5的应用程序缓存，也称为App Cache，是一种强大的特性，允许Web应用程序在离线状态下仍能正常运行。这个特性通过创建一个名为manifest的文件，将特定的网页资源预先下载并存储在本地，以便在没有网络连接时使用...
### Html离线缓存WebView配置详解 在移动应用开发中，使用WebView加载网页或本地HTML内容是一种常见的做法。为了提高用户体验、减少网络流量消耗以及增强应用的可用性，合理配置WebView中的离线缓存机制变得尤为...
应用缓存是HTML5离线存储的一种方式，允许开发者将静态资源（如HTML、CSS、JavaScript文件等）缓存到用户的本地，以便在网络不可用时仍能访问应用。启用应用缓存的方法是在HTML文档的`<html>`标签中添加`manifest`...
2. 故障排除：如果网页加载异常，检查缓存可以帮助确定问题是否出在本地，比如是否因为某些资源未正确下载导致。 3. 数据恢复：在某些情况下，网页上的信息可能已被删除，但它们可能仍存在于缓存中，使用...
HTML5则引入了许多新特性，其中包括Web存储（Web Storage）和离线缓存（App Cache），这些都为本地数据操作提供了可能。特别是Web SQL Database或IndexedDB，它们允许在浏览器中存储大量结构化数据，可以用于备份或...