HTML5在线状态检测和DOM Storage

除了离线资源缓存外,html5离线应用开发还可能用到以下技术

 

在线状态检测

navigator.onLine

navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线;如果为 false, 表示离线。当网络状态发生变化时,navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。

 

online/offline 事件

当开发离线应用时,通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知,因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时,online/offline 事件就会被出发。因此,开发者可以通过监听它们的 online/offline 事件来获悉网络状态。

 

下面是一个实例:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>

<body>
<script type="text/javascript">
var updateLineStatus = function(event){
    if(navigator.onLine){
        alert(您目前在线);
    }else{
        alert(您目前离线);
    };
};
window.addEventListener(online, updateLineStatus, false);
window.addEventListener(offline, updateLineStatus, false); 

/*
在这里提一下,网上看到有的文章是这样绑定online/offline事件的
document.body.addEventListener(‘online‘, updateLineStatus, false);
但我经过测试,在Chrome,是无法触发事件的,必须要像我上面的写法才能触发
其他浏览器暂未测试
*/
</script>
</body>
</html>

 

DOM Storage

DOM Storage 分为两类:sessionStorage 和 localStorage。它们就一个地方不同,sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。

 

DOM Storage 的常用方法(sessionStorage 和 localStorage 通用):

getItem(key);  //获取信息

setItem(key, value);  //设置信息

removeItem(key);  //删除信息

 

下面是看一个例子:

<!DOCTYPE HTML> 
<html> 
<body> 
<script> 
// 在 sessionStorage 中定义‘userName‘变量
sessionStorage.setItem(userName, developerworks);       
// 访问‘userName‘变量
alert("Your user is: " + sessionStorage.getItem(userName)); 
// 最后删除‘userName‘
sessionStorage.removeItem(userName);                       
</script> 
</body> 
</html>

 




HTML5在线状态检测和DOM Storage,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。