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的更多相关文章
- 浅谈 HTML5 的 DOM Storage 机制 (转)
在开发 Web 应用时,开发者有时需要在本地存储数据.当前浏览器支持 cookie 存储,但其大小有 4KB 的限制.这对于一些 Ajax 应用来说是不够的.更多的存储空间需要浏览器本身或是插件的支持 ...
- web离线应用--dom storage
web离线应用--dom storage dom storage是html5添加的新功能,其实也不是什么新的应用,只不过是cookie的放大版本,由于cookie的大小只有4kb,而且在每次请求一个新 ...
- 利用HTML5开发Android(7)---HTML5本地存储之Database Storage
在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- 检测一个DOM对象是否为空
我们时常要检测一个DOM对象是否为空. var $jObject = $('#btn'); alert($jObject ); 我们会发现,$jObject 永远不会为空.为什么呢?$ 方法查找对象, ...
- HTML5本地存储之Web Storage应用介绍
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- HTML5本地存储之Web Storage实例篇,最有用的是localStorage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Augmenting DOM Storage with IE's userData behavior
http://www.javascriptkit.com/javatutors/domstorage2.shtml Augmenting DOM Storage with IE's userData ...
- PHP实现用户在线状态检测
这个是基于ThinkPHP框架的,其他的可以自己根据需求改 1.先新建一个tags.php文件,放在配置目录Conf下. <?php /* * 添加行为 * */ return arr ...
随机推荐
- .NET WCF Return String 字符串有反斜杠的处理
应该是: {"Message":"Hello World"} 结果是:" {\"Message\":\"Hello Wo ...
- C# 编写的SqlServer 数据库自动备份服务，带配置，功能强大
数据库自动备份服务,带配置,还算可以吧 周末抽时间,编写了一个这样的工具,可以让,对数据库不了解或不熟悉的人,直接学会使用备份,省时省力,同样,我也将一份,通过脚本进行备份的,也奉献上来, 通过sql ...
- c# webbrowser在xp下自动闪退的一个坑
接前面的做了个扫码登录的,但是使用中发现在win7下没有题,但是在xp中使用时在加载那个二维码时会导致直接闪退,还无法捕捉到错误,折腾了一下午无果. 今天早上来看贴子有人说可能是webbrowser中 ...
- C#读取Excel的数据,并且以混合模式读取,防止数据类型变更
/// <summary> /// Read Excel to DataSet /// </summary> /// <param name="filename ...
- Python短路原则
1.括号内逻辑先执行 2.and优先级大于or 3.and一假为假 4.or一真为真 and:如果左边为假,返回左边值.如果左边不为假,返回右边值. or:如果左边为真,返回左边值.如果左边不为真,返 ...
- python中readline判断文件读取结束的方法
注:内容来自网络 本文实例讲述了python中readline判断文件读取结束的方法.分享给大家供大家参考.具体分析如下: 大家知道,python中按行读取文件可以使用readline函数,下面现介绍 ...
- window.onload与$(document).ready()的对比
一.window.onload:(1)必须等待网页中所有的内容加载完毕后(包括图片)才能执行:(2)不能同时编写多个,如: window.onload = function(){ alert(&quo ...
- 模糊查询中Like的使用
通配符: %. _ %:表示任意个或多个字符.可匹配任意类型和长度的字符 _:表示任意单个字符.匹配单个任意字符,它常用来限制表达式的字符长度语句:(可以代表一个中文字符) demo: //usern ...
- 洛谷P5265 【模板】多项式反三角函数
题面 传送门 题解 我数学好像学得太差了 据说根据反三角函数求导公式 \[{d\over dx}\arcsin x={1\over \sqrt{1-x^2}}\] \[{d\over dx}\arct ...
- Cookie、Session的具体使用
定义 保存在客户端浏览器的键值对. 作用场景 1.登录校验 2.保存用户的一些偏好信息 Cookie的查询 查询所有的Cookie信息: request.COOKIES 完整的Cookie信息就是一个 ...