HTML 5 开启移动 Web 应用程序的本地存储.ppt

Android开发教程之使用HTML5开启移动Web应用程序的本地存储HTML5中一个最有用的新特性是本地存储的标准化。最终，Web开发人员可以不再试图将所有客户端数据都填塞到4KB的Cookies中。现在您可以利用一个简单的API将大量数据存储在客户机上。这是一个完美的缓存机制，可以大大提高应用程序的速度——速度对于移动Web应用程序是一个至关重要的因素，因为它们相对于桌面应用程序来说，依赖的是慢得多的连接。在这个关于HTML5的系列的第二篇文章中，将了解如何使用本地存储，如何调试它，以及使用它来改善Web应用程序的各种方式。HTML5是一项被大肆宣扬的技术，但是它实至名归。它有望成为一个技术引爆点，将桌面应用程序功能引向浏览器。它不仅适用于传统浏览器，甚至也针对移动浏览器。更好的是，最流行的移动浏览器已经采纳和实现HTML5规范的很多重要部分。
在这个五部分的系列中，我们将详细了解几个新技术，它们都是HTML5的一部分，可以大大影响移动Web应用程序开发。在每一部分中，都将开发一个可以工作的移动Web应用程序，展示一个可以用于现代移动Web浏览器（比如iPhone和基于Android的设备上的浏览器）的HTML5特性。常用缩略语
API:应用程序编程接口
CSS:层叠样式表
DOM:文档对象模型
HTML:超文本标记语言
HTTP:超文本传输协议
JSON:JavaScript对象表示法
JSONP:带填充的JSON
SDK:软件开发工具包
UI:用户界面
URL:统一资源定位符
W3C:万维网联盟
在本文中，您将使用最新Web技术开发Web应用程序。这里的大多数代码只是HTML、JavaScript和CSS—任何Web开发人员的核心技术。需要的最重要的东西是用于测试代码的浏览器。本文中的大多数代码将运行在最新的桌面浏览器上，例外的情况会指出来。当然，还必须在移动浏览器上进行测试，您肯定希望最新的iPhone和AndroidSDK支持这些代码。本文中使用的是iPhoneSDK3.1.3和AndroidSDK2.1。参见参考资料中的链接。Web开发人员多年来一直在尝试将数据存储在客户机上。HTTPCookies被滥用于此目的。开发人员将大量数据挤放在HTTP规范分配的4KB上。原因很简单。出于各种原因，交互式Web应用程序需要存储数据，并且将这些数据存储在服务器上通常效率低下、不安全或者不适当。多年来，这个问题有了好几种备选方法。各种各样的浏览器已经引入了专有存储API。开发人员也利用了FlashPlayer中的扩展存储功能（通过JavaScript实现）。类似地，Google为各种浏览器创建了Gears插件，并且它包含了存储API。毫不奇怪的是，一些JavaScript库试图抹平这些差异。换句话说，这些库提供一个简单的API，然后检查有哪些存储功能（可能是一个专有浏览器API或者是一个诸如Flash的插件）。
对Web开发人员来说幸运的是，HTML5规范最终包含了一个针对本地存储的标准，被广泛的浏览器所实现。事实上，该标准是最快被采纳的标准，在所有主要浏览器的最新版本中都受到支持：Microsoft®、InternetExplorer®、MozillaFirefox、Opera、AppleSafari和GoogleChrome。对于移动开发人员更为重要的是，它在基于WebKit的浏览器（诸如iPhone和使用Android（版本2.0或更高版本）的手机中的浏览器）以及其他移动浏览器（比如Mozilla的Fennec）中受到支持。记住这一点，我们来看一下这个API。localStorageAPI十分简单。实际上，根据HTML5规范，它实现了DOMStorage接口。差别的原因是，HTML5指定两个不同的对象实现该接口：localStorage和sessionStorage。sessionStorage对象是一个只在会话期间存储数据的Storage实现。更确切地说，只要没有可以访问sessionStorage的脚本正在运行，浏览器就可以删除sessionStorage数据。这是与localStorage相对的，后者跨多个用户会话。两个对象共享相同的API，所以我将只着重介绍localStorage。StorageAPI是一种经典的名/值对数据结构。您将使用的最常见的方法是getItem(name)和setItem(name,value)。这些方法完全跟您预期的一样：getItem返回与名称相关联的值，如果什么都不存在，则返回null，而setItem要么是将名/值对添加到localStorage，要么是取代现有值。还有一个removeItem(name)，顾名思意，它从localStorage删除一个名/值对（如果存在的话，否