除了离线资源缓存外，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的更多相关文章

  1. 浅谈 HTML5 的 DOM Storage 机制 (转)

    在开发 Web 应用时,开发者有时需要在本地存储数据.当前浏览器支持 cookie 存储,但其大小有 4KB 的限制.这对于一些 Ajax 应用来说是不够的.更多的存储空间需要浏览器本身或是插件的支持 ...

  2. web离线应用--dom storage

    web离线应用--dom storage dom storage是html5添加的新功能,其实也不是什么新的应用,只不过是cookie的放大版本,由于cookie的大小只有4kb,而且在每次请求一个新 ...

  3. 利用HTML5开发Android(7)---HTML5本地存储之Database Storage

    在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...

  4. 利用HTML5开发Android(4)---HTML5本地存储之Web Storage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  5. 检测一个DOM对象是否为空

    我们时常要检测一个DOM对象是否为空. var $jObject = $('#btn'); alert($jObject ); 我们会发现,$jObject 永远不会为空.为什么呢?$ 方法查找对象, ...

  6. HTML5本地存储之Web Storage应用介绍

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  7. HTML5本地存储之Web Storage实例篇,最有用的是localStorage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Augmenting DOM Storage with IE's userData behavior

    http://www.javascriptkit.com/javatutors/domstorage2.shtml Augmenting DOM Storage with IE's userData ...

  9. PHP实现用户在线状态检测

    这个是基于ThinkPHP框架的,其他的可以自己根据需求改 1.先新建一个tags.php文件,放在配置目录Conf下. <?php  /*  * 添加行为  *  */  return arr ...

随机推荐

  1. Dubbo RPC源码解读

    https://yq.aliyun.com/articles/272405#27 本文代码摘录的时候,将一些与本流程无关的内容去掉了,如有需要请看源码. 一.闲言碎语 使用rpc框架已经多年了,虽然之 ...

  2. iOS AppStore个人开发者账号申请

    一.申请Apple Developer账号 1.注册App ID 1.打开苹果开发者网页,选择Account,注册Apple ID.   2.填写注册信息 3.地区选择China,填写好验证码,点击C ...

  3. asp.net——地址栏传递中文参数乱码解决方案

    地址栏传递中文参数乱码解决方案: 很多人在使用地址栏传递参数的时候都会遇到一个麻烦的问题(参数为中文时乱码了),那要怎么解决呢? 其实解决这个问题也不怎么难,无非就是给要传递的中文参数一个编码解码的过 ...

  4. javaScript prototype实例(正则) 自定义日期格式化方法

    一个JS自定义日期格式化方法,包括了不少知识点,以下方法来自jQuery DataTable中文的官方参考 //return (new Date(data)).Format("yyyy-MM ...

  5. .net core i上 K8S(二)运行简单.netcore程序

    上一章我们搭建了k8s集群,这一章我们开始在k8s集群上运行.netcore程序 1.kubectl run 在我的Docker系列教程里,我曾往docker hub中推送过一个镜像“webdokce ...

  6. on where having总结

    1. ON 和WHERE 所有的查询都回产生一个中间临时报表,查询结果就是从返回临时报表中得到.ON和WHERE后面所跟限制条件的区别,主要与限制条件起作用的时机有关, ON根据限制条件对数据库记录进 ...

  7. 解决Win8.1系统Wpprecorder.sys蓝屏故障

    为了跨平台调试,在Mac Air使用Bootscamp安装了Windows 8.1,但是经常出现system_thread_exceptions_not_handled(Wpprecorder.sys ...

  8. JAVA程序对MYSQL数据库加锁实验

    什么是脏读,不可重复读,幻读 1. 脏读 :脏读就是指当一个事务正在访问数据,并且对数据进行了修改,而这种修改还没有提交到数据库中,这时,另外一个事务也访问这个数据,然后使用了这个数据. 2. 不可重 ...

  9. 企业库连接形式简单例子记录 EnterpriseLibrary.Data

    结构图 webconfig 配置正确的连接字符串 <connectionStrings> <add name="DBConnection" connectionS ...

  10. 【maven】---pom.xml-dependencies

    前言 Maven在做项目开发的时候,需要用到多个jar包,这个时候,maven提供的中央仓库,就会根据依赖项,自动download需要的jar包,自动引用到项目中. 内容 具体依赖配置,集中在pom. ...