這篇文章將為大家詳細(xì)講解有關(guān)移動web應(yīng)用本地存儲的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元涿州做網(wǎng)站,已為上家服務(wù),為涿州各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

在這里中，您將使用最新的Web技術(shù)開發(fā)Web應(yīng)用程序。這里的大多數(shù)代碼只是HTML，JavaScript和CSS —任何Web開發(fā)人員的核心技術(shù)。需要的最重要的東西是用于測試代碼的瀏覽器。本文中的大多數(shù)代碼將運行在最新的桌面瀏覽器上，例外的情況會指出來。當(dāng)然，還必須在移動瀏覽器上進行測試，您肯定希望最新的iPhone和Android SDK支持這些代碼。使用的是iPhone SDK 3.1.3和Android SDK 2.1。

本地存儲基礎(chǔ)

Web開發(fā)人員一直一直在嘗試將數(shù)據(jù)存儲在上面。HTTPcookie被濫用于此目的。開發(fā)人員將大量數(shù)據(jù)壓縮到HTTP規(guī)范分配的4KB上。原因很簡單。出于各種原因，相互之間Web應(yīng)用程序需要存儲數(shù)據(jù)，并且將這些數(shù)據(jù)存儲在服務(wù)器上通常效率低下，不安全或者不適當(dāng)。多年來，這個問題有了好多種替代方法。各種的瀏覽器已經(jīng)約會了專有存儲API。開發(fā)人員也利用了Flash Player中的擴展存儲功能（通過JavaScript實現(xiàn)）。類似地，Google為各種瀏覽器創(chuàng)建了Gears插件，并且它包含了存儲API。毫不奇怪的是，一些JavaScript庫試圖抹平這些差異。換句話說，這些庫提供一個簡單的API，然后檢查有哪些存儲功能（可能是一個專有瀏覽器API或是一個諸如Flash的插件）。

對Web開發(fā)人員來說幸運的是，HTML 5規(guī)范最終包含了一個針對本地存儲的標(biāo)準(zhǔn)，被廣泛的瀏覽器所實現(xiàn)。事實上，該標(biāo)準(zhǔn)是可以被采用的標(biāo)準(zhǔn)，在所有主要瀏覽器的最新版本中都受到支持：Microsoft®，InternetExplorer®，Mozilla Firefox，Opera，Apple Safari和Google Chrome。對于移動開發(fā)人員更為重要的是，它在基于WebKit的瀏覽器（例如iPhone和使用Android（版本） 2.0或更高版本）的手機中的瀏覽器）以及其他移動瀏覽器（例如Mozilla的Fennec）中受到支持。記住這一點，我們來看一下這個API。

存儲API

localStorage API十分簡單。實際上，根據(jù)HTML 5規(guī)范，它實現(xiàn)了DOM Storage接口。相反的原因是，HTML 5指定了兩個不同的對象實現(xiàn)該接口：localStorage和sessionStorage。sessionStorage對象是一個只在會話期間存儲的數(shù)據(jù)的存儲實現(xiàn)。更準(zhǔn)確地說，只要沒有可以訪問sessionStorage的腳本運行運行，瀏覽器就可以刪除sessionStorage數(shù)據(jù)。這是與localStorage相對的，多個跨用戶會話。兩個對象共享相同的API ，所以我將只著重介紹localStorage。

存儲API是一種經(jīng)典的名/值對數(shù)據(jù)結(jié)構(gòu)。您將使用的最常見的方法是getItem（name）和setItem（name，value）。這些方法完全跟您預(yù)期的一樣：getItem返回與名稱相關(guān)聯(lián)的值，如果什么都不存在，則返回null，而setItem則是將名/值對添加到localStorage，或者是取代現(xiàn)有值。還有一個removeItem（name），顧名思意，它從localStorage刪除一個名/值對（如果存在的話，否則什么都不做）。最后，對于在所有名/值對上繼承，存在兩個API。一個是長度屬性，正在獲取存儲的名/值對的總數(shù)。對應(yīng)地，一個key（index）方法從存儲中使用的所有名稱中返回一個名稱。

利用這些簡單的API，可以完成大量任務(wù)，某些說個性化或跟蹤用戶行為。這些可以說對移動Web開發(fā)人員是重要的用例，但是還有一個更為重要的用例：高速緩存。利用localStorage，可以這讓您無需等待可能緩慢的服務(wù)器吞吐量，并且最小化了對服務(wù)器上數(shù)據(jù)的需求量?，F(xiàn)在來看一個例子，演示了如何使用localStorage來獲得這種高速緩存。

例子：利用本地存儲實現(xiàn)高速緩存

本例建立在本系列第1部分局部的例子之上，那時您最先開始了t0開發(fā)。那個例子展示了如何通過利用地理定位API取得用戶的位置而執(zhí)行Twitter的本地搜索。從那個例子開始，對它進行簡化，并大大提高它的性能。首先，將那個例子簡化成不帶定位的Twitter搜索。清單1展示了簡化的Twitter搜索應(yīng)用程序。

清單1.最基本的Twitter搜索

XML / HTML代碼將內(nèi)容復(fù)制到文本

< html >  

<頭>  

< meta http-equiv = “ Content-Type”內(nèi)容= “ text / html; charset = UTF-8” >    

< meta name  =  “ viewport” content  =  “寬度=設(shè)備寬度” />    

< title >基本的Twitter搜索  

<腳本類型= “ text / javascript” >   

    函數(shù)searchTwitter（）{  

        VAR 的查詢 =“http://search.twitter.com/search。JS嗎？回調(diào)  

= showResults ＆q =“;  

        查詢+ = $（“ kwBox”）。value;  

        var  script  =  document .createElement（“ script”）;  

        script.src  = 查詢；  

        document.getElementsByTagName（“ head”）[0] .appendChild（script）;  

    }  

    //為簡潔起見刪除ui代碼  

    函數(shù)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” >   

        <標(biāo)簽為= “ kwBox” >搜索Twitter：   

        <輸入類型= “文本” id = “ kwBox” />    

        <輸入類型= “按鈕”值= “開始！” onclick = “ searchTwitter（）” />     

    < div id = “結(jié)果” >   

在這個應(yīng)用程序中，使用了Twitter搜索API對JSONP的支持。用戶提交搜索時，會動態(tài)添加一個腳本標(biāo)記到頁面并指定相應(yīng)的函數(shù)的名稱，從而進行一次API調(diào)用。這允許您從Web頁面進行一次跨域調(diào)用。立即調(diào)用返回，將其調(diào)用（顯示結(jié)果）就會被調(diào)用。您添加一個鏈接到Twitter返回的每個tweet，然后創(chuàng)建一個簡單的表格使用顯示這些tweet。為了提速，您可以高速緩存從搜索查詢得到的結(jié)果，然后在用戶每次提交查詢時使用這些緩存的結(jié)果。首先來看如何使用localStorage來本地存儲tweet。

本地保存

基本的Twitter搜索可以搜索Twitter搜索API提供一組tweet。如果您可以本地保存這些tweet，則它們與生成的關(guān)鍵字搜索相關(guān)聯(lián)，那么您就擁有了一個有用的高速緩存。要保存tweet，您只需要修改當(dāng)對Twitter搜索API的調(diào)用返回時將被調(diào)用的回調(diào)函數(shù)。清單2展示了修改后的函數(shù)。

清單2.搜索和保存

JavaScript代碼將內(nèi)容復(fù)制到

函數(shù) searchTwitter（）{  

    var  keyword = $（“ kwBox” ）. value ;  

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

= processResults＆q =“ ;  

    查詢+ =關(guān)鍵字；  

    var  script = document.createElement（“ script” ）;  

    script.src =查詢;  

    document.getElementsByTagName（“ head” ）[0] .appendChild（script）;  

}  

函數(shù) processResults（response）{  

    var  keyword = $（“ kwBox” ）. value ;  

    var  tweets = response.results;  

    tweets.forEach（函數(shù)（tweet）{  

        saveTweet（keyword，tweet）;  

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

    }）;  

    makeResultsTable（）;  

    addTweetsToResultsTable（tweets）;  

}  

函數(shù) saveTweet（keyword，tweet）{  

    //檢查瀏覽器是否支持localStorage  

    如果 （！window.localStorage）{  

        回報;  

    }  

    如果 （！localStorage.getItem（“ tweet”  + tweet.id））{  

        localStorage.setItem（“ tweet”  + tweet.id，JSON.stringify（tweet））;  

    }  

    var  index = localStorage.getItem（“ index ::”  +關(guān)鍵字）;  

    如果 （索引）{  

        index = JSON.parse（index）;  

    } 其他 {  

        索引= [];  

    }  

    如果 （！index.contains（tweet.id））{  

        index.push（tweet.id）;  

        localStorage.setItem（“ index ::” +關(guān)鍵字，JSON.stringify（index））;  

    }   

}  

從第一個函數(shù)searchTwitter開始。這在用戶提交搜索時被調(diào)用。相對于清單1著重于惟一的地方是callback函數(shù)。不只是在tweet返回時顯示它們，您還需要處理它們（除了顯示，還要保存它們）。因此，您指定一個新的回調(diào)函數(shù)processResults。您針對每個tweet調(diào)用saveTweet。您還傳遞被用作生成搜索結(jié)果的關(guān)鍵字。這是因為您想要將這些tweet與該關(guān)鍵詞相關(guān)聯(lián)。

在saveTweet函數(shù)中，首先進行檢查，確保localStorage真正受到瀏覽器的支持。前面提到的，localStorage在桌面和移動瀏覽器中都受到廣泛支持，但是在使用這種新特性時進行檢查總是一個好主意。如果它不受支持，那么您簡單地從函數(shù)返回。看起來不會保存任何東西，但是也不會報錯—應(yīng)用程序在這種情況下只是不會具有高速緩存。如果localStorage受到支持，然后首先進行檢查，看這個tweet是否已經(jīng)存儲。如果沒有存儲，那么使用setItem本地存儲它。然后，檢索一個對應(yīng)于關(guān)鍵字的索引對象。這只是與關(guān)鍵字相關(guān)聯(lián)的tweet的ID。如果tweet ID還不是索引的一部分，那么添加它并更新索引。

注意，在清單3中保存和加載JSON時，您使用了JSON.stringify和JSON.parse。JSON對象（或者更簡單地說，是window.JSON）是HTML 5規(guī)范的一部分，作為一個總是存在的原生對象。stringify方法將把任何JavaScript對象轉(zhuǎn)換成一個序列化的字符串，而parse方法則進行相反的操作，它從序列化的串行表示還原JavaScript對象。這是很必要的，因為localStorage只存儲但是，原生JSON對象并不被廣泛實現(xiàn)為localStorage。例如，它不出現(xiàn)在iPhone（在撰寫本文中是版本3.1.3）的最新Mobile Safari瀏覽器上。它在最新的Android瀏覽器上受支持。您可以容易地檢查它是否在那里，如果不在，就加載一個另外的JavaScript文件。您可以通過訪問json.org Web站點（見參考資料），獲得原生使用的相同JSON對象。要本地查看這些圖1展示了一些高速緩存的推文，其存儲在本地，使用Chrome的開發(fā)人員工具進行查看。

圖1.本地高速緩存的tweet

整個本地高速緩存的tweet的屏幕截圖（帶有Key和Value細(xì)分） 

Chrome和Safari都內(nèi)置了開發(fā)人員工具，可以用于查看任何保存在localStorage中的數(shù)據(jù)。這對于調(diào)試使用localStorage的應(yīng)用程序非常有用。它以純文本形式展示本地存儲的鍵/值對。既然您已經(jīng)開始保存來自Twitter的搜索API的推文，剎車它們可以被用作高速緩存，所以您只需開始從localStorage讀取其即可。下面來看這是如何做到的。

快速本地數(shù)據(jù)加載

在清單2中，您看到了一些示例使用getItem方法從localStorage讀取數(shù)據(jù)?，F(xiàn)在當(dāng)一個用戶提交搜索時，您可以檢查高速緩存命中情況，并立即加載緩存的結(jié)果。當(dāng)然，您仍將針對Twitter搜索API進行查詢，因為人們一直在產(chǎn)生tweet并添加到搜索結(jié)果。但是，通過尋找還沒在高速緩存中的結(jié)果，現(xiàn)在您也有了讓查詢更為高效的方式。清單3展示了更新后的搜索代碼。

清單3.首先進行本地搜索

JavaScript代碼將內(nèi)容復(fù)制到

函數(shù) searchTwitter（）{  

    如果 （$（“ resultsTable” ））{  

        $（“ resultsTable” ）.innerHTML =  “” ; //清除結(jié)果  

    }  

    makeResultsTable（）;  

    var  keyword = $（“ kwBox” ）. value ;  

    var  maxId = loadLocal（keyword）;  

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

    查詢+ =關(guān)鍵字；  

    如果 （maxId）{  

        查詢+ =  “＆since_id =”  + maxId;  

    }  

    var  script = document.createElement（“ script” ）;  

    script.src =查詢;  

    document.getElementsByTagName（“ head” ）[0] .appendChild（script）;  

}  

函數(shù) loadLocal（keyword）{  

    如果 （！window.localStorage）{  

        回報;  

    }  

    var  index = localStorage.getItem（“ index ::”  +關(guān)鍵字）;  

    var  tweets = [];  

    var  i = 0;  

    var  tweet = {};  

    如果 （索引）{  

        index = JSON.parse（index）;  

        對于 （i = 0; i

            tweet = localStorage.getItem（“ tweet” + index [i]）;  

            如果 （鳴叫）{  

                tweet = JSON.parse（tweet）;  

                tweets.push（tweet）;  

            }  

        }  

    }  

    如果 （tweets.length <1）{  

        返回 0;  

    }  

    tweets.sort（函數(shù)（a，b）{  

        返回 a.id> b.id;  

    }）;  

    addTweetsToResultsTable（tweets）;  

    返回 tweets [0] .id；  

}  

您將注意到的第一件事情是，當(dāng)一個搜索被提交時，您首先調(diào)用新的loadLocal函數(shù)。該函數(shù)返回一個整數(shù)，即高速緩存中找到的最新tweet的ID。loadLocal函數(shù)接受一個關(guān)鍵字作為參數(shù)，，該關(guān)鍵字也被用作本地存儲高速緩存中查找相關(guān)的tweet。如果具有一個maxId，那么使用它來修改對Twitter的查詢，添加since_id參數(shù)。您在告訴Twitter API只返回比該參數(shù)中給定的ID新的tweet。潛在地，這可以減少從Twitter返回的結(jié)果數(shù)量。您任何時候都可以為移動Web應(yīng)用程序優(yōu)化服務(wù)器調(diào)用，因為它可以真正改善慢速移動網(wǎng)絡(luò)上的用戶體驗。現(xiàn)在更仔細(xì)地來看一下loadLocal。

在loadLocal函數(shù)中，您利用了存儲在前面的清單中。2通過使用getItem，您首先加載與關(guān)鍵字相關(guān)聯(lián)的索引。如果沒找到任何索引，那么就沒有緩存的tweet，所以就沒有展示這些推文，并且沒有可對查詢進行的優(yōu)化（您返回一個0值以指示這一點）。如果找到一個索引，那么您從它得到ID列表。這些tweet中的每一個都被本地高速緩存，所以您只需再次使用getItem方法，從高速緩存加載每一個tweet。的函數(shù)。您可能會引起注意，因為它在存儲和檢索tweet的代碼與顯示它們的代碼之間創(chuàng)建了替換，全都通過processResults函數(shù)。使用存儲事件會提供一種替代的，替代的的方法。

存儲事件

現(xiàn)在擴展示例應(yīng)用程序，展示最可能具有緩存結(jié)果的前10個搜索變量。這可能代表用戶最常提交的搜索。清單4展示了一個用于計算并顯示前10個搜索體積的函數(shù)。

清單4.計算前10個搜索范圍

JavaScript代碼將內(nèi)容復(fù)制到

函數(shù) displayStats（）{  

    如果 （！window.localStorage）{  return ; }  

    var  i = 0;  

    var  key =  “” ;  

    var  index = [];  

    var  cachedSearches = [];  

    對于 （i = 0; 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（函數(shù)（a，b）{  

        如果 （a.numResults == b.numResults）{  

            如果 （a.keyword.toLowerCase（）

                返回 -1;  

            } 否則，如果 （a.keyword.toLowerCase（）> b.keyword.toLowerCase（））{   

                返回 1;  

            }  

            返回 0;  

        }  

        返回 b.numResults-a.numResults;  

    }）。slice（0,10）.forEach（函數(shù)（搜索）{  

        var  li = document.createElement（“ li” ）;  

        var  txt = document.createTextNode（search.keyword +  “：”  + search.numResults）;  

        li.appendChild（txt）;  

        $（“ stats” ）.appendChild（li）;  

    }）;  

}  

該函數(shù)充分展示了localStorage API。您首先獲得存儲在localStorage中的大小的總數(shù)，然后再轉(zhuǎn)換這些壓縮。如果索引是索引，那么您就可以解析該對象并創(chuàng)建一個表示您要處理的數(shù)據(jù)的對象：與該數(shù)據(jù)存儲在一個叫做cachedSearches的排序中。然后，對cachedSearches進行排序，將具有最大結(jié)果的搜索排在第一位，如果兩個搜索具有相同數(shù)量的然后對于前10個搜索，為每個搜索創(chuàng)建HTML，并將它們附加到一個排好序的列表。讓我們在頁面初次加載時調(diào)用該函數(shù)，如清單5所示。

清單5.初始化頁面

window.onload = function（）{ displayStats（）; document.body.setAttribute（“ onstorage”，“ handleOnStorage（）;”）; }

第一行在頁面加載時調(diào)用清單4中的函數(shù)。第二次加載是變得更有趣的地方。您在這里為onstorage事件設(shè)置一個事件處理程序。每當(dāng)localStorage.setItem函數(shù)執(zhí)行完成，該事件就會激活。這將允許您重新計算前10個搜索。清單6展示了該事件處理程序。

清單6.存儲事件處理程序

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

onstorage事件將與窗口相關(guān)聯(lián)。它具有幾個有用的屬性：key，oldValue和newValue。除了這些自解釋的屬性之外，它還有一個URL（更改值的頁面的URL）和source（包含更改值）。如果用戶具有多個到應(yīng)用程序的窗口或選項卡或者甚至是iFrames，那么這最后兩個屬性就更有用，但是沒有哪一個在移動應(yīng)用程序中特別常見。返回清單6 ，，您真正需要的惟一的屬性是鍵屬性。您使用該屬性來看它是不是一個已修改的索引。如果是的，那么您重新設(shè)置前10名列表，并通過再次調(diào)用displayStats函數(shù)而重新替換它。該技術(shù)的優(yōu)點是，其他函數(shù)都不需要了解前10名列表，因為它是自包含的。

在前面我提到過，DOM Storage（它包含localStorage和sessionStorage）總體來說是一個被廣泛采用的HTML 5特性。但是，存儲事件對于這一點來說是一個例外—至少在桌面瀏覽器上如此。在iPhone和Android瀏覽器是Safari 4+和Internet Explorer 8+。在Firefox，Chrome和Opera中不受支持。但是在移動領(lǐng)域，情況稍有好轉(zhuǎn)。的最新版本都完全支持存儲事件，并且此處指定的代碼都能在這些瀏覽器中完美地運行。

結(jié)束語

作為長期的Web開發(fā)人員來說，為做到他們一直一直想做，卻苦于找不，因為作為一名開發(fā)人員，突然在縮減上擁有巨額的存儲空間，您會覺得自己獲得了很大的解放。到好的方式來做的事情帶來了轉(zhuǎn)機。對于移動開發(fā)人員來說，則更振奮人心，因為它真正開啟了數(shù)據(jù)的本地高速緩存。除了大大改善應(yīng)用程序的性能之外，本地高速緩存對于推動移動Web應(yīng)用程序的另一個新的令人振奮的功能-離線-是很關(guān)鍵的。這將是本系列下一篇文章的主題。

關(guān)于“移動web應(yīng)用本地存儲的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。