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。

Storage API

localStorage API 十分簡單。實際上，根據 HTML 5 規范，它實現了 DOM Storage 接口。差別的原因是，HTML 5 指定兩個不同的對象實現該接口：localStorage 和 sessionStorage。sessionStorage 對象是一個只在會話期間存儲數據的 Storage 實現。更確切地說，只要沒有可以訪問 sessionStorage 的腳本正在運行，浏覽器就可以刪除 sessionStorage 數據。這是與 localStorage 相對的，後者跨多個用戶會話。兩個對象共享相同的 API，所以我將只著重介紹 localStorage。

Storage API 是一種經典的名/值對數據結構。您將使用的最常見的方法是 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 搜索