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

html教程 跟版网

在本文中，您将使用最新 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 搜索

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <meta name = "viewport" content = "width = device-width"/>  
  5. <title>Basic Twitter Search</title>  
  6. <script type="text/javascript">  
  7.     function searchTwitter(){  
  8.         var query = "http://search.twitter.com/search.json?callback  
  9. =showResults&q=";  
  10.         query += $("kwBox").value;  
  11.         var script = document.createElement("script");  
  12.         script.src = query;  
  13.         document.getElementsByTagName("head")[0].appendChild(script);  
  14.     }  
  15.     // ui code deleted for brevity  
  16.     function showResults(response){  
  17.         var tweets = response.results;  
  18.         tweets.forEach(function(tweet){  
  19.             tweet.linkUrl = "http://twitter.com/" + tweet.from_user   
  20. + "/status/" + tweet.id;  
  21.         });  
  22.         makeResultsTable(tweets);  
  23.     }  
  24. </script>  
  25. <!--  CSS deleted for brevity -->  
  26. </head>  
  27. <body>  
  28.     <div id="main">  
  29.         <label for="kwBox">Search Twitter:</label>  
  30.         <input type="text" id="kwBox"/>  
  31.         <input type="button" value="Go!" onclick="searchTwitter()"/>  
  32.     </div>  
  33.     <div id="results">  
  34.     </div>  
  35. </body>  
  36. </html>  

在这个应用程序中，使用了 Twitter 搜索 API 对 JSONP 的支持。用户提交搜索时，会动态添加一个脚本标记到页面并指定回调函数的名称，从而进行一次 API 调用。这允许您从 Web 页面进行一次跨域调用。一旦调用返回，回调函数（showResults）就会被调用。您添加一个链接 URL 到 Twitter 返回的每个 tweet，然后创建一个简单的表格用于显示这些 tweet。为了提速，您可以高速缓存从搜索查询得到的结果，然后在用户每次提交查询时使用这些缓存的结果。首先来看如何使用 localStorage 来本地存储 tweet。

本地保存

基本的 Twitter 搜索将从 Twitter 搜索 API 提供一组 tweet。如果您可以本地保存这些 tweet，并将它们与生成它们的关键词搜索相关联，那么您就具有了一个有用的高速缓存。要保存 tweet，您只需要修改当对 Twitter 搜索 API 的调用返回时将被调用的 callback 函数。清单 2 展示了修改后的函数。


清单 2. 搜索和保存

JavaScript Code复制内容到剪贴板
  1. function searchTwitter(){  
  2.     var keyword = $("kwBox").value;  
  3.     var query = "http://search.twitter.com/search.json?callback 
  4. =processResults&q=";  
  5.     query += keyword;  
  6.     var script = document.createElement("script");  
  7.     script.src = query;  
  8.     document.getElementsByTagName("head")[0].appendChild(script);  
  9. }  
  10. function processResults(response){  
  11.     var keyword = $("kwBox").value;  
  12.     var tweets = response.results;  
  13.     tweets.forEach(function(tweet){  
  14.         saveTweet(keyword, tweet);  
  15.         tweet.linkUrl = "http://twitter.com/" + tweet.from_user + "/status/" + tweet.id;  
  16.     });  
  17.     makeResultsTable();  
  18.     addTweetsToResultsTable(tweets);  
  19. }  
  20. function saveTweet(keyword, tweet){  
  21.     // check if the browser supports localStorage  
  22.     if (!window.localStorage){  
  23.         return;  
  24.     }  
  25.     if (!localStorage.getItem("tweet" + tweet.id)){  
  26.         localStorage.setItem("tweet" + tweet.id, JSON.stringify(tweet));  
  27.     }  
  28.     var index = localStorage.getItem("index::" + keyword);  
  29.     if (index){  
  30.         index = JSON.parse(index);  
  31.     } else {  
  32.         index = [];  
  33.     }  
  34.     if (!index.contains(tweet.id)){  
  35.         index.push(tweet.id);  
  36.         localStorage.setItem("index::"+keyword, JSON.stringify(index));  
  37.     }   
  38. }  

 

从第一个函数 searchTwitter 开始。这在用户提交搜索时被调用。相对于 清单 1 做了改动的惟一的地方是 callback 函数。不只是在 tweet 返回时显示它们，您还需要处理它们（除了显示，还要保存它们）。因此，您指定一个新的 callback 函数 processResults。您针对每个 tweet 调用 saveTweet。您还传递被用于生成搜索结果的关键词。这是因为您想要将这些 tweet 与该关键词相关联。

在 saveTweet 函数中，首先进行检查，确保 localStorage 真正受到浏览器的支持。正如前面所提到的，localStorage 在桌面和移动浏览器中都受到广泛支持，但是在使用这样的新特性时进行检查总是一个好主意。如果它不受支持，那么您简单地从函数返回。显然不会保存任何东西，但是也不会报错 — 应用程序在这种情况下只是不会具有高速缓存。如果 localStorage 受到支持，那么首先进行检查，看这个 tweet 是否已经存储。如果没有存储，那么使用 setItem 本地存储它。接下来，检索一个对应于关键词的索引对象。这只是一组与关键词相关联的 tweet 的 ID。如果 tweet ID 还不是索引的一部分，那么添加它并更新索引。

注意，在 清单 3 中保存和加载 JSON 时，您使用了 JSON.stringify 和 JSON.parse。JSON 对象（或者更确切地说，是window.JSON）是 HTML 5 规范的一部分，作为一个总是存在的 原生 对象。stringify 方法将把任何 JavaScript 对象转换成一个序列化的字符串，而 parse 方法则进行相反的操作，它从序列化的字符串表示还原 JavaScript 对象。这是很必要的，因为 localStorage只存储字符串。但是，原生 JSON 对象并不被广泛实现为 localStorage。例如，它不出现在 iPhone（在撰写本文时是版本 3.1.3）的最新 Mobile Safari 浏览器上。它在最新 Android 浏览器上受支持。您可以容易地检查它是否在那里，如果不在，就加载一个额外的 JavaScript 文件。您可以通过访问 json.org Web 站点（参见 参考资料），获得原生使用的相同 JSON 对象。要本地查看这些序列化的字符串是什么样的，可以使用各种浏览器工具检查 localStorage 中为给定站点存储的内容。图 1 展示了一些高速缓存的 tweet，它们存储在本地，使用 Chrome 的 Developer Tools 进行查看。


图 1. 本地高速缓存的 tweet
一系列本地高速缓存的 tweet 的屏幕截图（带有 Key 和 Value 字段） 

Chrome 和 Safari 都内置了开发人员工具，可以用于查看任何保存在 localStorage 中的数据。这对于调试使用 localStorage 的应用程序非常有用。它以纯文本形式展示本地存储的键/值对。既然您已经开始保存来自 Twitter 的搜索 API 的 tweet，以便它们可以被用作高速缓存，所以您只需开始从 localStorage 读取它们即可。下面来看这是如何做到的。

快速本地数据加载

在 清单 2 中，您看到了一些例子使用 getItem 方法从 localStorage 读取数据。现在当一个用户提交搜索时，您可以检查高速缓存命中情况，并立即加载缓存的结果。当然，您仍将针对 Twitter 搜索 API 进行查询，因为人们一直在产生 tweet 并添加到搜索结果。但是，通过只寻找还没在高速缓存中的结果，现在您也有了让查询更为高效的方式。清单 3 展示了更新后的搜索代码。


清单 3. 首先进行本地搜索

JavaScript Code复制内容到剪贴板
  1. function searchTwitter(){  
  2.     if ($("resultsTable")){  
  3.         $("resultsTable").innerHTML = ""; // clear results  
  4.     }  
  5.     makeResultsTable();  
  6.     var keyword = $("kwBox").value;  
  7.     var maxId = loadLocal(keyword);  
  8.     var query = "http://search.twitter.com/search.json?callback=processResults&q=";  
  9.     query += keyword;  
  10.     if (maxId){  
  11.         query += "&since_id=" + maxId;  
  12.     }  
  13.     var script = document.createElement("script");  
  14.     script.src = query;  
  15.     document.getElementsByTagName("head")[0].appendChild(script);  
  16. }  
  17. function loadLocal(keyword){  
  18.     if (!window.localStorage){  
  19.         return;  
  20.     }  
  21.     var index = localStorage.getItem("index::" + keyword);  
  22.     var tweets = [];  
  23.     var i = 0;  
  24.     var tweet = {};  
  25.     if (index){  
  26.         index = JSON.parse(index);  
  27.         for (i=0;i<index.length;i++){  
  28.             tweet = localStorage.getItem("tweet"+index[i]);  
  29.             if (tweet){  
  30.                 tweet = JSON.parse(tweet);  
  31.                 tweets.push(tweet);  
  32.             }  
  33.         }  
  34.     }  
  35.     if (tweets.length < 1){  
  36.         return 0;  
  37.     }  
  38.     tweets.sort(function(a,b){  
  39.         return a.id > b.id;  
  40.     });  
  41.     addTweetsToResultsTable(tweets);  
  42.     return tweets[0].id;  
  43. }  

 

您将注意到的第一件事情是，当一个搜索被提交时，您首先调用新的 loadLocal 函数。该函数返回一个整数，即高速缓存中找到的最新 tweet 的 ID。loadLocal 函数接受一个 keyword 作为参数，该关键词也被用于在 localStorage 高速缓存中寻找相关 tweet。如果具有一个 maxId，那么使用它来修改对 Twitter 的查询，添加 since_id 参数。您在告诉 Twitter API 只返回比该参数中给定的 ID 新的 tweet。潜在地，这可以减少从 Twitter 返回的结果数量。您任何时候都可以为移动 Web 应用程序优化服务器调用，因为它可以真正改善慢速移动网络上的用户体验。现在更仔细地来看一下 loadLocal。

在 loadLocal 函数中，您利用了存储在前面 清单 2 中的数据结构。通过使用 getItem，您首先加载与关键词相关联的索引。如果没找到任何索引，那么就没有缓存的 tweet，所以就没有展示的东西，并且没有可对查询进行的优化（您返回一个 0 值以指示这一点）。如果找到一个索引，那么您从它得到 ID 列表。这些 tweet 中的每一个都被本地高速缓存，所以您只需再次使用 getItem 方法，从高速缓存加载每一个 tweet。加载的 tweet 然后被排序。使用 addTweetsToResultsTable 函数来显示 tweet，然后返回最新 tweet 的 ID。在本例中，得到新 tweet 的 代码直接调用更新 UI 的函数。您可能会对此感到惊讶，因为它在存储和检索 tweet 的代码与显示它们的代码之间创建了耦合，全都通过 processResults 函数。使用存储事件会提供一种备选的、更少耦合的方法。

存储事件

现在扩展示例应用程序，展示最可能具有缓存结果的前 10 个搜索条目。这可能代表用户最常提交的搜索。清单 4 展示了一个用于计算并显示前 10 个搜索条目的函数。


清单 4. 计算前 10 个搜索条目

JavaScript Code复制内容到剪贴板
  1. function displayStats(){  
  2.     if (!window.localStorage){ return; }  
  3.     var i = 0;  
  4.     var key = "";  
  5.     var index = [];  
  6.     var cachedSearches = [];  
  7.     for (i=0;i<localStorage.length;i++){  
  8.         key = localStorage.key(i);  
  9.         if (key.indexOf("index::") == 0){  
  10.             index = JSON.parse(localStorage.getItem(key));  
  11.             cachedSearches.push ({keyword: key.slice(7), numResults: index.length});  
  12.         }  
  13.     }  
  14.     cachedSearches.sort(function(a,b){  
  15.         if (a.numResults == b.numResults){  
  16.             if (a.keyword.toLowerCase() < b.keyword.toLowerCase()){  
  17.                 return -1;  
  18.             } else if (a.keyword.toLowerCase() > b.keyword.toLowerCase()){  
  19.                 return 1;  
  20.             }  
  21.             return 0;  
  22.         }  
  23.         return b.numResults - a.numResults;  
  24.     }).slice(0,10).forEach(function(search){  
  25.         var li = document.createElement("li");  
  26.         var txt = document.createTextNode(search.keyword + " : " + search.numResults);  
  27.         li.appendChild(txt);  
  28.         $("stats").appendChild(li);  
  29.     });  
  30. }  

 

该函数充分展示了 localStorage API。您首先得到存储在 localStorage 中的条目的总数，然后再迭代这些条目。如果条目是索引，那么您就解析该对象并创建一个表示您要处理的数据的对象：与索引相关联的关键词和索引中 tweet 的数量。该数据存储在一个叫做cachedSearches 的数组中。接下来，排序 cachedSearches，将具有最多结果的搜索排在第一位，如果两个搜索具有相同数量的缓存结果，就再使用一个不区分大小写的字母排序。然后对于前 10 个搜索，为每个搜索创建 HTML，并将它们附加到一个排好序的列表。让我们在页面初次加载时调用该函数，如 清单 5 所示。


清单 5. 初始化页面

				
window.onload = function() {
    displayStats();
    document.body.setAttribute("onstorage", "handleOnStorage();");
}

第一行在页面加载时调用 清单 4 中的函数。第二次加载是变得更有趣的地方。您在这里为 onstorage 事件设置一个事件处理程序。每当 localStorage.setItem 函数执行完成，该事件就会激活。这将允许您重新计算前 10 个搜索。清单 6 展示了该事件处理程序。


清单 6. Storage 事件处理程序

				
function handleOnStorage() {
    if (window.event && window.event.key.indexOf("index::") == 0){
        $("stats").innerHTML = "";
        displayStats();
    }
}

onstorage 事件将与窗口相关联。它具有几个有用的属性：key、oldValue 和 newValue。除了这些自解释的属性之外，它还有一个url（更改值的页面的 URL）和 source（包含更改值的脚本的窗口）。如果用户具有多个到应用程序的窗口或选项卡或者甚至是 iFrames，那么这最后两个属性就更有用，但是没有哪一个在移动应用程序中特别常见。回到 清单 6，您真正需要的惟一的属性是key 属性。您使用该属性来看它是不是一个已修改的索引。如果是的，那么您重新设置前 10 名列表，并通过再次调用 displayStats函数而重新绘制它。该技术的优点是，其他函数都不需要了解前 10 名列表，因为它是自包含的。

前面 我提到过，DOM Storage（它包含 localStorage 和 sessionStorage）总体来说是一个被广泛采纳的 HTML 5 特性。但是，存储事件对于这一点来说是一个例外 — 至少在桌面浏览器上如此。在撰写本文时，仅有的支持存储事件的桌面浏览器是 Safari 4+ 和 Internet Explorer 8+。在 Firefox、Chrome 和 Opera 中不受支持。但是在移动领域，情况稍有好转。iPhone 和 Android 浏览器的最新版都完全支持存储事件，并且这里给出的代码都能在这些浏览器中完美地运行。

结束语

作为一名开发人员，突然在客户机上拥有巨额的存储空间，您会觉得自己获得了很大的解放。对于长期的 Web 开发人员来说，为做到他们多年来一直想做、却苦于找不到好的方式来做的事情带来了转机。对于移动开发人员来说，则更为振奋人心，因为它真正开启了数据的本地高速缓存。除了大大改善应用程序的性能之外，本地高速缓存对于推进移动 Web 应用程序的另一个新的令人振奋的功能 —— 离线 —— 是很关键的。这将是本系列下一篇文章的主题。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

Js正则表达式过滤特殊字符、表情
Js正则表达式过滤特殊字符、表情的实例代码： let ret = "12312ffds#￥@￥#%^***(()))*)).`@%@￥@￥", val = this.customDeviceName;//特殊字符过滤let pattern = new RegExp("[`~!@#$^*()=|{}':;',\\[\\]./?~！@#￥……*（）——|{}【】‘；：”“'。，、？]
让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main，header，footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理？你可能花几天也想不明白，但谁在意呢！这个脚本几乎是所有正式网站必用
HTML5之Canvas基础绘图教程
HTML5 火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线： !doctype html ht
HTML5 respond.js 解决IE6~8的响应式布局问题
响应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这
微软开源新一代浏览器的JavaScript引擎核心代码
近日，微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号，项目名称为 ChakraCore，遵循MIT许可协议。 ...，HTML5中国，中国最大的HTML5中文门户。
Google Chrome终于支持CSS Variables了
这篇文章报道的不是“新闻”，因为W3C早已开始着手CSS变量方面的工作。至于Google，则要追溯到11月初，当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...，HTML5中国，中国最大的HTML5中文门户。
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室