回页首
在线状态检测
如果 Web 应用程序仅仅是一些静态页面的组合，那么通过 cache manifest
缓存资源文件以后，就可以支持离线访问了。但是随着互联网的发展，特别是 Web2.0 概念流行以来，用户的提交的数据渐渐成为互联网的主流。那么在开发支持离线的
Web
应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时，把数据存储在本地；在线以后，再把数据同步到服务器上。为了做到这一点，开发者首先必须知道浏览器是否在线。HTML5
提供了两种检测是否在线的方式：navigator.online 和 online/offline 事件。
- navigator.onLine
navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false,
表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。
- online/offline 事件
当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5
还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着
document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline
事件来获悉网络状态。
回页首
DOM Storage
在开发支持离线功能的 Web 应用时，开发者需要在本地存储数据。当前浏览器支持的 cookie 虽然也可以用来存储数据，但是 cookie
长度非常小（通常几 k），而且功能有限。因此，HTML5 中新引入了 DOM Storage 机制，用于存储 key/value
对，它的设计目标是提供大规模、安全且易用的存储功能。
DOM Storage 分类
DOM Storage 分为两类：sessionStorage 和 localStorage。除了以下区别外，这两类存储对象的功能是完全一致的。
- sessionStorage 用于存储与当前浏览器窗口关联的数据。窗口关闭后，sessionStorage 中存储的数据将无法使用。
- localStorage 用于长期存储数据。窗口关闭后，localStorage 中的数据仍然可以被访问。所有浏览器窗口可以共享
localStorage 的数据。
DOM Storage 接口
每一个 Storage 对象都可以存储一系列 key/value 对，Storage 接口定义为：
interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
deleter void removeItem(in DOMString key);
void clear();
};
|
其中最常用的接口是 getItem 和 setItem。getItem 用于获取指定 key 的 value，而 setItem 用于设置指定 key 的
value。
DOM Storage 示例
这里给出一个使用了 sessionStorage 的例子，localStorage 的用法与它相同。首先使用 SetItem
添加了一个名为“userName”的项，它的值是“developerworks”。然后，调用 getItem
得到“userName”的值，并且弹出提示框显示它。最后，调用 removeItem 删除“userName”。
清单 6 DOM Storage 示例代码
<!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>
|
回页首
Web SQL Database
除了 DOM Storage 以外，HTML5 中还有另外一种数据存储方式 Web SQL
Database。它提供了基本的关系数据库功能，支持页面上的复杂的、交互式的数据存储。它既可以用来存储用户产生的数据，也可以作为从服务器获取数据的本地高速缓存。例如可以把电子邮件、日程等数据存储到数据库中。Web
SQL Database 支持数据库事务的概念，从而保证了即使多个浏览器窗口操作同一数据，也不会产生冲突。
Web SQL Database 基本用法
- 创建和打开数据库
使用数据库的第一步是创建并打开数据库，API 是 openDatabase。当数据库已经存在时，openDatabase
仅仅打开数据库；如果这个数据库不存在，那么就创建一个空数据库并且打开它。openDatabase 的定义是：
Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned long estimatedSize, in optional DatabaseCallback creationCallback); |
name：数据库名。
version：数据库版本。
displayName：显示名称。
estimatedSize：数据库预估长度（以字节为单位）。
creationCallback：回调函数。
- 执行事务处理
在打开数据库以后，就可以使用事务 API
transaction。每一个事务作为操作数据库的原子操作，不会被打断，从而避免了数据冲突。transaction 的定义是：void transaction(in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback);
callback：事务回调函数，其中可以执行 SQL 语句。
errorCallback：出错回调函数。
successCallback：执行成功回调函数。
- 执行 SQL 语句
在事务的回调函数 callback 中，可以执行 SQL 语句，API 是 executeSQL。executeSQL 的定义是：
void executeSql(in DOMString sqlStatement, in optional ObjectArray arguments, in optional SQLStatementCallback callback, in optional SQLStatementErrorCallback errorCallback);
sqlStatement：SQL 语句。
arguments：SQL 语句需要的参数。
callback：回调函数。
errorCallback：出错回调函数。
Web SQL Database 示例
下面通过一个例子说明 Web SQL Database 的基本用法。它首先调用 openDatabase 创建了名为“fooDB”的数据库。然后使用
transaction 执行两条 SQL 语句。第一条 SQL 语句创建了名为“foo”的表，第二条 SQL 语句向表中插入一条记录。
清单 7 Web SQL Database 示例代码
var db = openDatabase(‘fooDB‘, ‘1.0‘, ‘fooDB‘, 2 * 1024);
db.transaction(function (tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS foo (id unique, text)‘);
tx.executeSql(‘INSERT INTO foo (id, text) VALUES (1, "foobar")‘);
});