HTML5移动应用开发第2章：移动web应用的本地存储

在本文中，您将使用最新 Web 技术开发 Web 应用程序。这里的大多数代码只是 HTML、javaScript 和 CSS — 任何 Web 开发人员的核心技术。需要的最重要的东西是用于测试代码的浏览器。本文中的大多数代码将运行在最新的桌面浏览器上，例外的情况会指出来。当然，还必须在移动浏览器上进行测试，您肯定希望最新的 iPhone 和 Android SDK 支持这些代码。本文中使用的是 iPhone SDK 3.1.3 和 Android SDK 2.1。

本地存储基础

Web 开发人员多年来一直在尝试将数据存储在客户机上。HTTP Cookies 被滥用于此目的。开发人员将大量数据挤放在 HTTP 规范分配的 4KB 上。原因很简单。出于各种原因，交互式 Web 应用程序需要存储数据，并且将这些数据存储在服务器上通常效率低下、不安全或者不适当。多年来，这个问题有了好几种备选方法。各种各样的浏览器已经引入了专有存储 API。开发人员也利用了 Flash Player 中的扩展存储功能（通过 Javascript 实现）。类似地，Google 为各种浏览器创建了 Gears 插件，并且它包含了存储 API。毫不奇怪的是，一些 JavaScript 库试图抹平这些差异。换句话说，这些库提供一个简单的 API，然后检查有哪些存储功能（可能是一个专有浏览器 API 或者是一个诸如 Flash 的插件）。

对 Web 开发人员来说幸运的是，HTML 5 规范最终包含了一个针对本地存储的标准，被广泛的浏览器所实现。事实上，该标准是最快被采纳的标准，在所有主要浏览器的最新版本中都受到支持：Microsoft®、Internet Explorer®、Mozilla Firefox、Opera、Apple Safari 和 Google Chrome。对于移动开发人员更为重要的是，它在基于 WebKit 的浏览器（诸如 iPhone 和使用 Android（版本 2.0 或更高版本）的手机中的浏览器）以及其他移动浏览器（比如 Mozilla 的 Fennec）中受到支持。记住这一点，我们来看一下这个 API。

StorageAPI

localStorageAPI 十分简单。实际上，根据 HTML 5 规范，它实现了 DOM Storage 接口。差别的原因是，HTML 5 指定两个不同的对象实现该接口：localStorage和sessionStorage。sessionStorage对象是一个只在会话期间存储数据的Storage实现。更确切地说，只要没有可以访问sessionStorage的脚本正在运行，浏览器就可以删除sessionStorage数据。这是与localStorage相对的，后者跨多个用户会话。两个对象共享相同的 API，所以我将只着重介绍localStorage。

StorageAPI 是一种经典的名/值对数据结构。您将使用的最常见的方法是getItem(name)和setItem(name, value)。这些方法完全跟您预期的一样：getItem返回与名称相关联的值，如果什么都不存在，则返回 null，而setItem要么是将名/值对添加到localStorage，要么是取代现有值。还有一个removeItem(name)，顾名思意，它从localStorage删除一个名/值对（如果存在的话，否则什么都不做）。最后，对于在所有名/值对上迭代，存在两个 API。一个是长度属性，给出正在存储的名/值对的总数。对应地，一个key(index)方法从存储中使用的所有名称中返回一个名称。

利用这些简单的 API，可以完成大量任务，比如说个性化或跟踪用户行为。这些可以说对移动 Web 开发人员是重要的用例，但是还有一个更为重要的用例：高速缓存。利用localStorage，可以在客户机的本地机器上容易地从服务器高速缓存数据。这让您无需等待可能缓慢的服务器回调，并且最小化了对服务器上数据的需求量。现在来看一个例子，演示了如何使用 localStorage 来获得这种高速缓存。

例子：利用本地存储实现高速缓存

本例建立在本系列第 1 部分中的例子之上，那时您最先开始了 t0 开发。那个例子展示了如何通过利用地理定位API 取得用户的位置而执行 Twitter 的本地搜索。从那个例子开始，对它进行简化，并大大提高它的性能。首先，将那个例子简化成不带地理位置的 Twitter 搜索。清单 1展示了简化的 Twitter 搜索应用程序。

清单 1. 最基本的 Twitter 搜索