HTML5 applicationCache 对象

提问人：刘团圆发布时间：2020-11-17

applicationCache对象代表本地缓存，可以用它来通知用户本地缓存已经被更新，也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中，当浏览器对本地缓存进行更新并加入新的资源文件时，会触发applicationCache对象的updateready事件，通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新，用户需要手工刷新页面来得到最新版本的应用程序，代码如下：

applicationCache.addEventListener("updateready", function(event) {

// 本地缓存已鉍寅新，通知用户。

alert("本地缓存已被更新，可以刷新页面来得到本程序的最新版本。");

},false);

另外，可以通过applicationCache对象的swapCache()方法，来控制如何进行本地缓存的更新及更新的时机，代码如下：

swapCache()方法

该方法用来手工执行本地缓存的更新，它只能在applicationCache对象的updateReady事件被触发时调用。updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文件中所要求的资源文件下载到本地后触发。该事件的含义是“本地缓存准备被更新”。当这个事件被触发后，可以用swapCacheO方法来手工进行本地缓存的更新。

如果本地缓存的容量非常大，本地缓存的更新工作将需要相对较长的时间，而且会把浏览器锁住。这时最好有个提示，告诉用户正在进行本地缓存的更新，代码如下：

applicationCache.addEventliistener("updateready", function(event) {

// 本地缓存已被更新，通知用户。

alert("正在更新本地缓存……"）;

applicationGaphe.swjap.Giacihe();

alert("本地缓存更新完毕，可以刷新页面使用最新版应用程序。”）;

},false) ;

在以上代码中，如果不使用swapCacheO方法，本地缓存一样会被更新，但是更新的时候不一样。如果不调用该方法，本地缓存将在下一次打开本页面时被更新；如果调用该方法，则本地缓存将会被立刻更新。因此，可以使用confirm()方法让用户选择更新时机，是立刻，还是下次打开页面时更新，特别是当用户可能正在页面上执行一个较大操作的时候。

另外，尽管使用swapCacheO方法立刻更新了本地缓存，但是并不意味着我们页面上的图像和脚本文件也会被立刻更新，它们都是在重新打开本页面时才会生效。下面是较完整的示例，HTML代码如下：

<!DOCTYPE html>

<head>

<title>swapCache()方法示例</title>

</head〉

<body>

<p>swapCache()方法不例。</p>

</body>

</html>

JS代码如下：

document.addEventListener ("load"，function(event) {

setInterval(function() {

// 手工检查是否有更新

applicationCache.update();

}, 5000);

applicationCache.addEventListener("updateready", function(event) {

if(confirm("本地缓存已被更新，需要刷新页面获取最新版本吗？"）{

//手工更新本地缓存

applicationCache.swapCache();

//重载页面

location.reload();

}

}, false);

})；

该页面使用的manifest文件的内容如下：

Txt代码

CACHE MANIFEST

#version 1.20

CACHE:

script.js

继续查找其他问题的答案？

相关视频回答

点击加载更多评论>>

HTML5 applicationCache 对象

继续查找其他问题的答案？

最近更新