HTML5离线功应用能详解(2)
时间：2013-04-11 17:01 来源： 作者： 收藏
离线应用示例 最后，通过一个例子来说明使用 HTML5 开发离线应用的基本方法。这个例子会用到前面提到的离线资源缓存、在线状态检测和 DOM Storage 等功能。假设我们开发一个便签管理的 Web 应用程序，用户可以在其
离线应用示例
离线应用示例
|
这个页面的源文件是 index.html，它的代码如清单 8 所示。
清单 8 页面 HTML 代码
XML/HTML Code复制内容到剪贴板
<html manifest="notes.manifest">
<head>
<script type="text/javascript" src="server.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="UI.js"></script>
<title>Note List</title>
</head>
<body onload = "SyncWithServer()">
<input type="button" value="New Note" onclick="newNote()">
<ul id="list"></ul>
</body>
</html>
在 body 中声明了一个按钮和一个无序列表。当按下“New Note”按钮时，newNote 函数将被调用，它用来添加一条新的便签。而无序列表初始为空，它是用来显示便签的列表。
cache manifest 文件
定义 cache manifest 文件，声明需要缓存的资源。在这个例子中，需要缓存“index.html”、“server.js”、“data.js”和“UI.js”等 4 个文件。除了前面列出的“index.html”外，“server.js”、“data.js”和“UI.js”分别包含服务器相关、数据存储和用户界 面代码。cache manifest 文件定义如下。
清单 9 cache manifest 文件
XML/HTML Code复制内容到剪贴板
CACHE MANIFEST
index.html
server.js
data.js
UI.js
用户界面代码
用户界面代码定义在 UI.js 中。
清单 10 用户界面代码 UI.js
JavaScript Code复制内容到剪贴板
function newNote()
{
var title = window.prompt("New Note:");
if (title)
{
add(title);
}
}
function add(title)
{
// 在界面中添加
addUIItem(title);
// 在数据中添加
addDataItem(title);
}
function remove(title)
{
// 从界面中删除
removeUIItem(title);
// 从数据中删除
removeDataItem(title);
}
function addUIItem(title)
{
var item = document.createElement("li");
item.setAttribute("ondblclick", "remove('"+title+"')");
item.innerHTML=title;
var list = document.getElementById("list");
list.appendChild(item);
}
function removeUIItem(title)
{
var list = document.getElementById("list");
for (var i = 0; i < list.children.length; i++) {
if(list.children[i].innerHTML == title)
{
list.removeChild(list.children[i]);
}
}
}
UI.js 中的代码包含添加便签和删除便签的界面操作。
添加便签
用户点击“New Note”按钮，newNote 函数被调用。
newNote 函数会弹出对话框，用户输入新便签内容。newNote 调用 add 函数。
add 函数分别调用 addUIItem 和 addDataItem 添加页面元素和数据。addDataItem 代码将在后面列出。
addUIItem 函数在页面列表中添加一项。并指明 ondblclick 事件的处理函数是 remove，使得双击操作可以删除便签。
删除便签
用户双击某便签时，调用 remove 函数。
remove 函数分别调用 removeUIItem 和 removeDataItem 删除页面元素和数据。removeDataItem 将在后面列出。
removeUIItem 函数删除页面列表中的相应项。
数据存储代码
数据存储代码定义在 data.js 中
清单 11 数据存储代码 data.js
JavaScript Code复制内容到剪贴板
var storage = window['localStorage'];
function addDataItem(title)
{
if (navigator.onLine) // 在线状态
{
addServerItem(title);
}
else // 离线状态
{
var str = storage.getItem("toAdd");
if(str == null)
{
str = title;
}
else
{
str = str + "," + title;
}
storage.setItem("toAdd", str);
}
}
function removeDataItem(title)
{
if (navigator.onLine) // 在线状态
{
removeServerItem(title);
}
else // 离线状态
{
var str = storage.getItem("toRemove");
if(str == null)
{
str = title;
}
else
{
str = str + "," + title;
}
storage.setItem("toRemove", str);
}
}
function SyncWithServer()
{
// 如果当前是离线状态，不需要做任何处理
if (navigator.onLine == false)return;
var i = 0;
// 和服务器同步添加操作
var str = storage.getItem("toAdd");
if(str != null)
{
var addItems = str.split(",");
for(i = 0; i<addItems.length; i++)
{
addDataItem(addItems[i]);
}
storage.removeItem("toAdd");
}
// 和服务器同步删除操作
str = storage.getItem("toRemove");
if(str != null)
{
var removeItems = str.split(",");
for(i = 0; i<removeItems.length; i++)
{
removeDataItem(removeItems[i]);
}
storage.removeItem("toRemove");
}
// 删除界面中的所有便签
var list = document.getElementById("list");
while(list.lastChild != list.firstElementChild)
list.removeChild(list.lastChild);
if(list.firstElementChild)
list.removeChild(list.firstElementChild);
// 从服务器获取全部便签，并显示在界面中
var allItems = getServerItems();
if(allItems != "")
{
var items = allItems.split(",");
for(i = 0; i<items.length; i++)
{
addUIItem(items[i]);
}
}
}
window.addEventListener("online", SyncWithServer,false);
data.js 中的代码包含添加便签、删除便签和与服务器同步等数据操作。其中用到了 navigator.onLine 属性、online 事件、DOM Storage 等 HTML5 新功能。
添加便签：addDataItem
通过 navigator.onLine 判断是否在线。
如果在线，那么调用 addServerItem 直接把数据存储到服务器上。addServerItem 将在后面列出。
如果离线，那么把数据添加到 localStorage 的“toAdd”项中。
删除便签：removeDataItem
通过 navigator.onLine 判断是否在线。
如果在线，那么调用 removeServerItem 直接在服务器上删除数据。removeServerItem 将在后面列出。
如果离线，那么把数据添加到 localStorage 的“toRemove”项中。
数据同步：SyncWithServer
在 data.js 的最后一行，注册了 window 的 online 事件处理函数 SyncWithServer。当 online 事件发生时，SyncWithServer 将被调用。其功能如下。
如果 navigator.onLine 表示当前离线，则不做任何操作。
把 localStorage 中“toAdd”项的所有数据添加到服务器上，并删除“toAdd”项。
把 localStorage 中“toRemove”项的所有数据从服务器中删除，并删除“toRemove”项。
删除当前页面列表中的所有便签。
调用 getServerItems 从服务器获取所有便签，并添加在页面列表中。getServerItems 将在后面列出。
服务器相关代码
服务器相关代码定义在 server.js 中。
清单 12 服务器相关代码 server.js
JavaScript Code复制内容到剪贴板
function addServerItem(title)
{
// 在服务器中添加一项
}
function removeServerItem(title)
{
// 在服务器中删除一项
}
function getServerItems()
{
// 返回服务器中存储的便签列表
}
由于这部分代码与服务器有关，这里只说明各个函数的功能，具体实现可以根据不同服务器编写代码。
在服务器中添加一项：addServerItem
在服务器中删除一项：removeServerItem
返回服务器中存储的便签列表：getServerItems
总结
本文介绍了 HTML5 为了支持离线应用程序新增的强大功能。通过阅读本文，读者能够了解到 HTML5 中离线相关特性的基本用法，从而掌握利用 HTML5 开发 Web 离线应用的方法。
html教程阅读排行
-
meta viewport标签的使用说明(手机浏览缩放控制)
2014-06-08
-
2014-06-04
-
2010-04-07
-
2014-06-04
-
2014-06-09
-
2014-06-07
-
2014-06-09
-
2014-06-05
最新文章
-
2017-10-25
-
2014-06-15
-
2014-06-15
-
2014-06-15
-
2014-06-15
-
使用SWFObject完美解决HTML插入Flash的各浏览器兼容性方案
2014-06-12
-
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
2014-06-12
-
2014-06-12
热门源码
