开发移动 Web Ajax 应用

核心提示： 这个函数里执行的都是标准的 DOM 操作，唯一复杂的方面是记录可以附加在后面或插到前面，开发移动 Web Ajax 应用(9)， 或者添加到顶部或底部，在前面的 清单 6 中， 这样，我们只需要一个从本地存储读取所有数据的函数，函数的最后一个操作是删除正在加载的图片， 这其中包括基本的 Ajax

这个函数里执行的都是标准的 DOM 操作。唯一复杂的方面是记录可以附加在后面或插到前面， 或者添加到顶部或底部。在前面的 清单 6 中，函数的最后一个操作是删除正在加载的图片。 这其中包括基本的 Ajax 函数，我们可以根据用例选择使用。然而，应用需要从服务器下载许多数据， 然后再解析。对于移动 Web 应用，我们可以有更好的方式，我们可以使用本地缓存。

使用本地存储进行缓存

本地存储属于 HTML 5 规范，并且得到广泛的支持。它有一个简单的 name - value 存储机制， 而其中 name 和 value 都是字符串。所以将记录保存到本地存储是很简单的，如清单 8 所示。

清单 8. 保存到本地存储

function　saveLocal(entry){　
　　if　(!window.localStorage){　
　　　　return;　
　　}　
　　localStorage.setItem(entry["id"],　JSON.stringify(entry));　
}　

同样，这里做了一些浏览器功能检查，按照 HTML 5 规范，首先检查 window 对象是否有 localStorage 属性。 如果有，那么我们就可以使用记录的 id 作为存储的键。 对于 value，必须使用字符串，因此我们使用 JSON.stringify 函数来将对象序列化成一个字符串。 这样，我们只需要一个从本地存储读取所有数据的函数。如清单 9 所示。

清单 9. 从本地存储加载数据

function　loadLocal(){　
　　if　(!window.localStorage){　
　　　　return　[];　
　　}　
　　var　i　=　0;　
　　var　e　=　{};　
　　var　id　=　0;　
　　var　entries　=　[];　
　　for　(i=0;　i<　localStorage.length;　i++){　
　　　　id　=　localStorage.key(i);　
　　　　e　=　JSON.parse(localStorage.getItem(id));　
　　　　entries[entries.length]　=　e;　
　　}　
　　entries.sort(function(a,b)　{　
　　　　return　b.id　-　a.id;　
　　});　
　　return　entries;　
}