文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

移动web应用本地存储的示例分析

2024-04-02 19:55

关注

这篇文章将为大家详细讲解有关移动web应用本地存储的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

本地存储基础

Web开发人员一直一直在尝试将数据存储在上面。HTTPcookie被滥用于此目的。开发人员将大量数据压缩到HTTP规范分配的4KB上。原因很简单。出于各种原因,相互之间Web应用程序需要存储数据,并且将这些数据存储在服务器上通常效率低下,不安全或者不适当。多年来,这个问题有了好多种替代方法。各种的浏览器已经约会了专有存储API。开发人员也利用了Flash Player中的扩展存储功能(通过JavaScript实现)。类似地,Google为各种浏览器创建了Gears插件,并且它包含了存储API。毫不奇怪的是,一些JavaScript库试图抹平这些差异。换句话说,这些库提供一个简单的API,然后检查有哪些存储功能(可能是一个专有浏览器API或是一个诸如Flash的插件)。

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

存储API

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

存储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代码将内容复制到文本

< html >  

<头>  

< meta http-equiv = “ Content-Type”内容= “ text / html; charset = UTF-8” >    

< meta name  =  “ viewport” content  =  “宽度=设备宽度” />    

< title >基本的Twitter搜索</ title >  

<脚本类型= “ text / javascript” >   

    函数searchTwitter(){  

        VAR 的查询 =“http://search.twitter.com/search。JS吗?回调  

= showResults &q =“;  

        查询+ = $(“ kwBox”)。value;  

        var  script  =  document .createElement(“ script”);  

        script.src  = 查询;  

        document.getElementsByTagName(“ head”)[0] .appendChild(script);  

    }  

    //为简洁起见删除ui代码  

    函数showResults(response){  

        var  tweets  =  response .results;  

        tweets.forEach(function(tweet){  

            tweet.linkUrl  =  “ http://twitter.com/”  + tweet.from_user   

+“ / status /” + tweet.id;  

        });  

        makeResultsTable(tweets);  

    }  

</脚本>  

<!-为简洁起见删除了CSS->  

</头>  

<身体>  

    < div id = “ main” >   

        <标签为= “ kwBox” >搜索Twitter:</标签>   

        <输入类型= “文本” id = “ kwBox” />    

        <输入类型= “按钮”值= “开始!” onclick = “ searchTwitter()” />     

    </ div >  

    < div id = “结果” >   

    </ div >  

</ body >  

</ html >  

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

本地保存

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

清单2.搜索和保存

JavaScript代码将内容复制到

函数 searchTwitter(){  

    var  keyword = $(“ kwBox” ). value ;  

    var  query =  “ http://search.twitter.com/search.json?callback 

= processResults&q =“ ;  

    查询+ =关键字;  

    var  script = document.createElement(“ script” );  

    script.src =查询;  

    document.getElementsByTagName(“ head” )[0] .appendChild(script);  

}  

函数 processResults(response){  

    var  keyword = $(“ kwBox” ). value ;  

    var  tweets = response.results;  

    tweets.forEach(函数(tweet){  

        saveTweet(keyword,tweet);  

        tweet.linkUrl =  “ http://twitter.com/”  + tweet.from_user +  “ / status /”  + tweet.id;  

    });  

    makeResultsTable();  

    addTweetsToResultsTable(tweets);  

}  

函数 saveTweet(keyword,tweet){  

    //检查浏览器是否支持localStorage  

    如果 (!window.localStorage){  

        回报;  

    }  

    如果 (!localStorage.getItem(“ tweet”  + tweet.id)){  

        localStorage.setItem(“ tweet”  + tweet.id,JSON.stringify(tweet));  

    }  

    var  index = localStorage.getItem(“ index ::”  +关键字);  

    如果 (索引){  

        index = JSON.parse(index);  

    } 其他 {  

        索引= [];  

    }  

    如果 (!index.contains(tweet.id)){  

        index.push(tweet.id);  

        localStorage.setItem(“ index ::” +关键字,JSON.stringify(index));  

    }   

}  

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

在saveTweet函数中,首先进行检查,确保localStorage真正受到浏览器的支持。前面提到的,localStorage在桌面和移动浏览器中都受到广泛支持,但是在使用这种新特性时进行检查总是一个好主意。如果它不受支持,那么您简单地从函数返回。看起来不会保存任何东西,但是也不会报错&mdash;应用程序在这种情况下只是不会具有高速缓存。如果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对象。要本地查看这些图1展示了一些高速缓存的推文,其存储在本地,使用Chrome的开发人员工具进行查看。

图1.本地高速缓存的tweet

整个本地高速缓存的tweet的屏幕截图(带有Key和Value细分) 

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

快速本地数据加载

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

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

JavaScript代码将内容复制到

函数 searchTwitter(){  

    如果 ($(“ resultsTable” )){  

        $(“ resultsTable” ).innerHTML =  “” ; //清除结果  

    }  

    makeResultsTable();  

    var  keyword = $(“ kwBox” ). value ;  

    var  maxId = loadLocal(keyword);  

    var  query =  “ http://search.twitter.com/search.json?callback=processResults&q=” ;  

    查询+ =关键字;  

    如果 (maxId){  

        查询+ =  “&since_id =”  + maxId;  

    }  

    var  script = document.createElement(“ script” );  

    script.src =查询;  

    document.getElementsByTagName(“ head” )[0] .appendChild(script);  

}  

函数 loadLocal(keyword){  

    如果 (!window.localStorage){  

        回报;  

    }  

    var  index = localStorage.getItem(“ index ::”  +关键字);  

    var  tweets = [];  

    var  i = 0;  

    var  tweet = {};  

    如果 (索引){  

        index = JSON.parse(index);  

        对于 (i = 0; i <index.length; i ++){  

            tweet = localStorage.getItem(“ tweet” + index [i]);  

            如果 (鸣叫){  

                tweet = JSON.parse(tweet);  

                tweets.push(tweet);  

            }  

        }  

    }  

    如果 (tweets.length <1){  

        返回 0;  

    }  

    tweets.sort(函数(a,b){  

        返回 a.id> b.id;  

    });  

    addTweetsToResultsTable(tweets);  

    返回 tweets [0] .id;  

}  

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

在loadLocal函数中,您利用了存储在前面的清单中。2通过使用getItem,您首先加载与关键字相关联的索引。如果没找到任何索引,那么就没有缓存的tweet,所以就没有展示这些推文,并且没有可对查询进行的优化(您返回一个0值以指示这一点)。如果找到一个索引,那么您从它得到ID列表。这些tweet中的每一个都被本地高速缓存,所以您只需再次使用getItem方法,从高速缓存加载每一个tweet。的函数。您可能会引起注意,因为它在存储和检索tweet的代码与显示它们的代码之间创建了替换,全都通过processResults函数。使用存储事件会提供一种替代的,替代的的方法。

存储事件

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

清单4.计算前10个搜索范围

JavaScript代码将内容复制到

函数 displayStats(){  

    如果 (!window.localStorage){  return ; }  

    var  i = 0;  

    var  key =  “” ;  

    var  index = [];  

    var  cachedSearches = [];  

    对于 (i = 0; i <localStorage.length; i ++){  

        键= localStorage.key(i);  

        如果 (key.indexOf(“ index ::” )== 0){  

            index = JSON.parse(localStorage.getItem(key));  

            cachedSearches.push({keyword:key.slice(7),numResults:index.length});  

        }  

    }  

    cachedSearches.sort(函数(a,b){  

        如果 (a.numResults == b.numResults){  

            如果 (a.keyword.toLowerCase()<b.keyword.toLowerCase()){  

                返回 -1;  

            } 否则,如果 (a.keyword.toLowerCase()> b.keyword.toLowerCase()){   

                返回 1;  

            }  

            返回 0;  

        }  

        返回 b.numResults-a.numResults;  

    })。slice(0,10).forEach(函数(搜索){  

        var  li = document.createElement(“ li” );  

        var  txt = document.createTextNode(search.keyword +  “:”  + search.numResults);  

        li.appendChild(txt);  

        $(“ stats” ).appendChild(li);  

    });  

}  

该函数充分展示了localStorage API。您首先获得存储在localStorage中的大小的总数,然后再转换这些压缩。如果索引是索引,那么您就可以解析该对象并创建一个表示您要处理的数据的对象:与该数据存储在一个叫做cachedSearches的排序中。然后,对cachedSearches进行排序,将具有最大结果的搜索排在第一位,如果两个搜索具有相同数量的然后对于前10个搜索,为每个搜索创建HTML,并将它们附加到一个排好序的列表。让我们在页面初次加载时调用该函数,如清单5所示。

清单5.初始化页面

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

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

清单6.存储事件处理程序

函数handleOnStorage(){ 如果(window.event && window.event.key.indexOf(“ index ::”)== 0){ $(“ stats”)。innerHTML =“”; displayStats(); } }

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

在前面我提到过,DOM Storage(它包含localStorage和sessionStorage)总体来说是一个被广泛采用的HTML 5特性。但是,存储事件对于这一点来说是一个例外&mdash;至少在桌面浏览器上如此。在iPhone和Android浏览器是Safari 4+和Internet Explorer 8+。在Firefox,Chrome和Opera中不受支持。但是在移动领域,情况稍有好转。的最新版本都完全支持存储事件,并且此处指定的代码都能在这些浏览器中完美地运行。

结束语

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

关于“移动web应用本地存储的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯