标签：
回页首
离线应用示例
最后，通过一个例子来说明使用 HTML5 开发离线应用的基本方法。这个例子会用到前面提到的离线资源缓存、在线状态检测和 DOM Storage
等功能。假设我们开发一个便签管理的 Web
应用程序，用户可以在其中添加和删除便签。它支持离线功能，允许用户在离线状态下添加、删除便签，并且当在线以后能够同步到服务器上。
这个程序的界面很简单，如图 1 所示。用户点击“New Note”按钮可以在弹出框中创建新的便签，双击某便签就表示删除它。
这个页面的源文件是 index.html，它的代码如清单 8 所示。
<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
文件，声明需要缓存的资源。在这个例子中，需要缓存“index.html”、“server.js”、“data.js”和“UI.js”等 4
个文件。除了前面列出的“index.html”外，“server.js”、“data.js”和“UI.js”分别包含服务器相关、数据存储和用户界面代码。cache
manifest 文件定义如下。
CACHE MANIFEST index.html server.js data.js UI.js |
用户界面代码定义在 UI.js 中。
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 中的代码包含添加便签和删除便签的界面操作。
数据存储代码定义在 data.js 中。
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 新功能。
在 data.js 的最后一行，注册了 window 的 online 事件处理函数 SyncWithServer。当 online
事件发生时，SyncWithServer 将被调用。其功能如下。
服务器相关代码定义在 server.js 中。
使用HTML5开发离线应用 - cache manifest(5)
标签：
原文地址：http://www.cnblogs.com/zhaoq/p/5061257.html
