Android开发教程之使用HTML5开启移动Web应用程序的本地存储

例子：利用本地存储实现高速缓存清单1.最基本的Twitter搜索本地保存清单2.搜索和保存快速本地数据加载清单3.首先进行本地搜索清单4.计算前10个搜索条目清单5.初始化页面清单6.Storage事件处理程序结束语手机软件开发培训第一品牌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删除一个名/值对（如果存在的话，否则什么都不做）。最后，对于在所有名/值对上迭代，存在两个API。一个是长度属性，给出正在存储的名/值对的总数。对应地，一个key(index)方法从存储中使用的所有名称中返回一个名称。利用这些简单的API，可以完成大量任务，比如说个性化或跟踪用户行为。这些可以说对移动Web开发人员是重要的用例，但是还有一个更为重要的用例：高速缓存。利用localStorage，可以在客户机的本地机器上容易地从服务器高速缓存数据。这让您无需等待可能缓慢的服务器回调，并且最小化了对服务器上数据的需求量。现在来看一个例子，演示了如何使用localStorage来获得这种高速缓存。手机软件开发培训第一品牌本例建立在本系列第1部分中的例子之上，那时您最先开始了t0开发。那个例子展示了如何通过利用地理定位API取得用户的位置而执行Twitter的本地搜索。从那个例子开始，对它进行简化，并大大提高它的性能。首先，将那个例子简化成不带地理位置的Twitter搜索。清单1展示了简化的Twitter搜索应用程序。手机软件开发培训第一品牌htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8metaname=viewportcontent=width=device-width/titleBasicTwitterSearch/titlescripttype=text/javascriptfunctionsearchTwitter(){varquery==showResults&q=;query+=$(kwBox).value;varscript=document.createElement(script);script.src=query;document.getElementsByTagName(head)[0].appendChild(script);}手机软件开发培训第一品牌//uicodedeletedforbrevityfunctionshowResults(response){vartweets=response.results;tweets.forEach(function(tweet){tweet.linkUrl=+/status/+tweet.id;});makeResultsTable(tweets);}/script手机软件开发培训第一品牌!--CSSdeletedforbrevity--/headbodydivid=mainlabelfor=kwBoxSearchTwitter:/labelinputtype=textid=kwBox/inputtype=buttonvalue=Go!onclick=searchTwitter()//divdivid=results/div/body/html手机软件开发培训第一品牌在这个应用程序中，使用了Twitter搜索API对JSONP的支持。用户提交搜索时，会动态添加一个脚本标记到页面并指定回调函数的名称，从而进行一次API调用。这允许您从Web页面进行一次跨域调用。一旦调用返回，回调函数（showResults）就会被调用。您添加一个链接URL到Twitter返回的每个tweet，然后创建一个简单的表格用于显示这些tweet。为了提速，您可以高速缓存从搜索查询得到的结果，然后在用户每次提交查询时使用这些缓存的结果。首先来看如何使用localStorage来本地存储tweet。手机软件开发培训第一品牌基本的Twitter搜索将从Twitter搜索API提供一组tweet。如果您可以本地保存这些tweet，并将它们与生成它们的关键词搜索相关联，那么您就具有了一个有用的高速缓存。要保存tweet，您只需要修改当对Twitter搜索API的调用返回时将被调用的callback函数。清单2展示了修改后的函数。手机软件开发培训第一品牌functionsearchTwitter(){varkeyword=$(kwBox).value;varquery==processResults&q=;query+=keyword;varscript=document.createElement(script);script.src=query;document.getElementsByTagName(head)[0].appendChild(script);}手机软件开发培训第一品牌functionprocessResults(response){varkeyword=$(kwBox).value;vartweets=response.results;tweets.forEach(function(tweet){saveTweet(keyword,tweet);tweet.linkUrl=