HMTL5之本地缓存

         在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:本地缓存更新时出错

 

 

你可能感兴趣的:(本地缓存)