移動web應用本地存儲的示例分析

這篇文章將為大家詳細講解有關移動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應用本地存儲的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。