本發明涉及一種基于localstorage的web前端數據本地存儲和訪問方法。
背景技術：
：隨著web2.0的到來，web應用程序的內容發生了變化，由發布-閱讀模式逐步向用戶-關系模式轉型，對頁面加載時間的要求日益升高，用戶體驗與用戶評價已成為評價系統優劣的一個重要指標。雖然現在部分網站可以通過服務器集群來提高系統性能，但費用很高，難以負擔，在此形勢下，研究人員另辟蹊徑，從客戶端瀏覽器著手，在不增加硬件成本的基礎上，同樣達到提高系統性能的效果。網絡的發展以及前端相關技術的發展，新的前端架構產生，新的開發標準不斷完善，國內外的一些知名互聯網企業也一直密切關注著客戶端的存儲，將更多的人和資源放到了本地存儲技術方案的探究中。特別是html5[1]規范的發布，其中的新特性，例如webstorage、indexeddb和websqldatabase等相關的技術[2-4]，無需安裝任何插件，運用到不同的實際場景中，為前端開發領域掀起了一場新的“革命”。使用本地緩存可從減少http請求數、減少頁面總資源大小和提高頁面加載效率三個方面來提升網站性能[5]。目前本地存儲的技術很多，例如cookie、userdata和localstorage等。通過對各項存儲技術進行分析比較，html5的localstorage優勢明顯。localstorage[6]有獨立的存儲空間，擴展了本地的存儲容量，大部分主流瀏覽器已實現兼容，有簡單易用的api，它的存儲內容不會被發送到服務器上，不與服務器進行交互，并且擁有事件監聽機制，可以監控數據變化情況。localstorage中的數據會保存在客戶端的硬盤上，或者是其它的存儲器上，數據會永久保存，除非自己手動刪除數據。webstorage為localstorage提供了的接口webstorageapi[7]，比cookie的接口更豐富易用，數據操作也更為簡便。webstorageapi是一種典型的key-value的數據結構[8]，提供了接口對數據進行操作。localstorage的使用原則是：如果localstorage緩存存在就使用，不存在就直接加載，就是所謂的平穩退化(或漸進增強)。localstorage目前還存在許多不足之處。有實驗表明，當訪問的數據量相同時，localstorage讀取一條大數據的時間約為1ms，但是多次讀取等量的小數據所花費的時間則是讀取一條大數據的幾十倍，也就是說使用localstorage頻繁讀取數據，會導致程序性能下降。此外，由于localstorage是永久性存儲，數據的使用期限無法控制，因此需要設計一個過期機制；而且瀏覽器為localstorage分配的存儲空間是有限制的，默認為5mb，如果有新數據進來，空間不夠時，會拋出quotaexceedederror錯誤，出現“寫不了”的情況。因此，針對localstorage存在頻繁讀取數據性能低下的問題、數據使用期限的問題和空間寫滿報錯程序終止的問題，有必要深入研究localstorage，設計一套基于localstorage的本地存儲優化方案。技術實現要素：本發明所解決的技術問題是，針對現有技術的不足，提供一種基于localstorage的web前端數據本地存儲和訪問方法，選用各項存儲技術中優勢明顯的localstorage緩存數據，并且能夠克服其不足，改善存儲性能。本發明所提供的技術方案為：一種基于localstorage的web前端數據本地存儲方法，包括以下步驟：步驟1、根據緩存數據類型將瀏覽器為localstorage分配的存儲空間劃分為多個存儲區域；步驟2、設計新的數據存儲格式，將數據存儲模式從key-value模式轉變為areaname-jsonobj模式；areaname-jsonobj模式包含areaname和jsonobj兩部分，areaname表示區域名；jsonobj表示json對象數據；jsonobj采用key-obj的形式表示，每個key對應一個obj，即對象，對象包含兩個屬性：1)value：存儲的數據內容；2)exptime：數據存儲的終止時間；步驟3、設計新的localstorage接口ls，將其包裝為js插件在系統中使用，將從磁盤中讀取數據轉換為從內存對象中讀取數據。進一步地，所述步驟1中，將瀏覽器為localstorage分配的存儲空間劃分為四個存儲區域，如表1所示：表1本地存儲區域劃分表區域名說明jc_ls存儲js、css、html等文件img_ls存儲靜態圖片資源db_ls存儲從數據庫中讀取的數據pub_ls存儲公共數據進一步地，所述步驟3中，新的localstorage接口ls提供的方法如表2所示：表2ls提供的方法進一步地，針對存儲空間寫滿錯誤，設置兩種解決方案：1)寫入預防：localstorage寫入數據時，計算空間是否已寫滿或者寫入該數據導致空間寫滿，若是，則基于lru算法清除“無用數據”，騰出空間；2)錯誤監控：對quotaexceedederror錯誤進行監聽，一旦捕捉到該錯誤，則基于lru算法清除“無用數據”，騰出空間。lru(leastrecentlyused,最近最少使用)算法的實現步驟為：s1、在每個存儲區域里設置一個order項，即在localstorage中存儲一條key值為“order”、value值為數組的數據，用來存儲每條數據的key值，該數組以數據的使用時間從小到大進行排序；s2、存儲新數據時，將其對應的key值添加到該存儲區域的order項的數組的最末端；s3、訪問或者更新數據時，則將該數據對應的key值移動到數組的最末端；s4、將數組前端的key值對應的數據標記為“無用數據”；需要釋放存儲空間時，根據數組首端的key值刪除對應數據。本發明還提供了一種基于localstorage的web前端數據訪問方法，數據以上述方法進行存儲；訪問數據時，首先判斷數據存儲區域，然后使用ls提供的方法將對應存儲區域的數據一次性取出，并轉換為json對象，存入內存變量中，再對內存變量進行相應的操作。進一步地，使用ls提供的getdata()方法將對應存儲區域的數據一次性取出。進一步地，在獲取數據時，得到相應的字符串，即value后，使用json的parse()方法，把value轉化為json對象。進一步地，對內存變量進行相應的操作具體為：1)使用get(key,data)獲取數據，判斷key是否存在，若key不存在，則轉步驟3)；若key存在，則轉步驟2)；2)根據數據的exptime字段判斷數據是否已過期，若是，則直接刪除數據，不允許進行訪問，并轉步驟3)；否則，返回對應的數據；3)返回undefined。有益效果：本發明針對localstorage目前存在的頻繁讀取時性能下降、數據的使用期限無法控制、存儲空間超限錯誤的三個缺陷，從數據格式設計和空間寫滿處理機制兩方面提出了一套優化方案。首先是根據數據類型對存儲區域進行分區設計，并設計了一種新的數據存儲格式areaname-jsonobj，以此為基礎設計了新的localstorage的接口ls，將從磁盤中讀取數據轉換為從內存對象中讀取數據，解決localstorage頻繁讀取數據性能低下的問題；數據使用期限的問題。然后針對localstorage存儲數據時超出存儲空間上限就會拋出quotaexceedederror錯誤，導致程序終止，出現“寫不了”的情況，在每個存儲區域增加一個order數組，存儲各數據的key值，基于lru算法根據數據的使用時間排序，首部數據標記為“無用數據”，從前期預防和后期監控兩個方面設計空間寫滿錯誤處理機制，及時清除“無用數據”，騰出空間，保證數據的正常寫入。實驗表明，通過對本地存儲方案的改進，使得web應用性能更優。附圖說明圖1localstorage的數據存儲模式圖2本發明改進的localstorage的數據存儲模式圖3訪問數據的過程設計圖4localstorage在各瀏覽器的存儲上限圖5各存儲方案的訪問速度對比圖6有無緩存頁面響應時間比較具體實施方式以下結合附圖和具體實施方式對本發明進行進一步具體說明。本發明的主要步驟及原理為：1劃分存儲區域網站頁面主要包含靜態資源和動態資源兩個部分。靜態資源主要是js、css、圖片甚至是html頁面等資源，動態資源主要是與后臺進行交互的各類數據。而適合使用localstorage進行緩存的數據主要包括三類：(1)js、css、html文件和圖片等，適合存儲變動頻率不大的此類型文件，加載頁面時可直接從緩存中讀取；(2)緩存公用數據，例如頁面標題、廣告等；(3)緩存從數據庫中讀取的基本保持不變的數據。視頻等空間較大的文件容易超出存儲空間上限，無法使用localstorage存儲。因此，根據緩存數據類型將瀏覽器為localstorage分配的存儲空間劃分為四個存儲區域，如表1所示。表1本地存儲區域劃分表區域名說明jc_ls存儲js、css、html等文件img_ls存儲靜態圖片資源db_ls存儲從數據庫中讀取的數據pub_ls存儲公共數據2設計新數據存儲格式localstorage采用key-value的模式存儲數據，value的值必須為字符串類型(傳入非字符串,也會在存儲時轉換為字符串，故只能存儲字符串類型的數據)，如圖1所示。結合步驟1中的分區技術，本發明將原始的存儲模式，即key-value模式轉變為areaname-jsonobj模式。如圖2所示，areaname-jsonobj模式包含areaname和jsonobj兩部分，areaname表示區域名；jsonobj表示json對象數據；jsonobj采用key-obj的形式表示，每個key對應一個obj，即對象，對象包含兩個屬性：1)value：存儲的數據內容；2)exptime：數據存儲的終止時間。在localstorage中，數據只能以字符串形式存儲，不能直接以數組和對象形式存儲。因此，在存儲數據時，需要使用json(javascriptobjectnotation，js對象標記，是一種輕量級的數據交換格式)的stringify()方法把json對象轉換成字符串進行存儲，該字符串即對應圖2中的“value”。在獲取數據時，得到相應的字符串后(即圖2中的“value”)，使用json的parse()方法，把value轉化為json對象。在每個存取區域內包含多個json子對象，以分區+數據項的模式存儲數據，數據形式為{areaname:{key:value,……},……}，。基于改進的存儲格式，本發明設計了新的localstorage接口ls，將其包裝為js插件在系統中使用，其與原始接口比較如表2所示。表2ls和localstorage提供的方法的比較訪問數據時，首先使用getdata()將對應存儲區域的數據一次性取出，轉換為json對象，存入內存變量中，對內存變量進行相應的操作。具體數據訪問過程如圖3所示。圖在圖3的過程中，由于本發明還未實現自動化識別數據所屬區域，目前只能人工進行判斷。判斷數據是否過期是根據exptime字段實現的，exptime字段中存儲的數值是毫秒級別的數據，所以在讀取數據時，需要將當前時間的轉換為毫秒級的數據，與exptime字段中存儲的數值進行比較。一旦超限，則直接刪除數據，不允許進行訪問。在實際場景中，需要頻繁獲取大批量的數據時，根據上述的分區規則，在使用localstorage存入數據時，全部分配在同一區域內，假設在db_ls中。根據上述設計的訪問方案分析可知，在訪問數據時，首先使用getdata()方法將db_ls區域內的所有數據取出來，轉化成json對象，存入內存變量中，使用get(key,data)從內存變量中獲取目標數據，最后進行各項操作。也就是說，在需要多次獲取同類數據時，使用該方案只需要從localstorage中進行一次磁盤訪問操作，然后操作內存變量，大量減少了磁盤訪問時間。此方案的設計將從磁盤中訪問數據轉換為從內存變量中訪問數據，而從內存變量中讀取數據的速度比從磁盤中讀取數據的速度快得多，由此可以解決localstorage頻繁讀取數據的低性能問題。3空間寫滿錯誤處理機制localstorage的存儲容量在500萬字符左右，一旦寫滿，會拋出quotaexceedederror錯誤，出現“寫不了”的情況。目前的處理方法是選擇手動清除所有緩存，處理的效率十分低下，大部分有用的資源也隨之被清除，下次程序運行時需要重新加載，該處理過程過于簡單粗暴，影響其它功能的操作。對于localstorage的存儲容量，各個瀏覽器支持的限額各有不同，所以本發明首先對各個瀏覽器的存儲限額做了測試，通過網頁工具-testoflocalstoragelimits/quota測試得到各瀏覽器的存儲容量，結果如圖4所示。從圖中可以看出，各個瀏覽器為localstorage分配的存儲容量存在很大差距，存儲容量且因瀏覽器版本的不同也會有所變化，由此會造成寫滿錯誤拋出的不可控。本發明選擇通過統一設置空間上限、檢測已用空間大小并限制寫入數據大小、及時清除無用數據，盡量避免拋出寫滿錯誤，保證存儲功能的正常運行。依據html5本地存儲中localstorage的存儲空間大小默認為5mb，本發明在應用測試中設置localstorage的存儲容量為5mb，設置其它容量上限也可以，對本發明技術方法實現無影響。但如果容量上限太小，將會影響數據讀取速度，從而降低頁面響應速度。針對存儲空間寫滿錯誤，設置有兩種解決方案：(1)寫入預防：localstorage寫入數據時，計算空間是否已寫滿或者寫入該數據導致空間寫滿，若是，則基于lru算法清除“無用數據”，騰出空間；(2)錯誤監控：對quotaexceedederror錯誤進行監聽，一旦捕捉到該錯誤，則基于lru算法清除“無用數據”，騰出空間。lru(leastrecentlyused，最近最少使用)算法的實現步驟如下：(1)在每個存儲區域里設置一個order項，即在localstorage中存儲一條key值為“order”、value值為數組數據，用來存儲每條數據的key值，該數組以數據的使用時間從小到大進行排序；(2)存儲新數據時，將其對應的key值添加到該存儲區域的order項的數組的最末端；(3)訪問或者更新數據時，則將該數據對應的key值移動到數組的最末端。(4)執行上述步驟后，order數組可以按要求正確排序，數組前端的key值對應的數據就是近期最少使用的數據，標記為“無用數據”。在需要釋放存儲空間時只需要根據數組首端的key值刪除對應數據就可以滿足要求。4實驗及結果分析對本發明提出的優化方案進行性能測試，通過實驗驗證該方案的可行性，主要從新數據存儲格式的繁讀取數據性能、使用緩存方案對頁面性能的影響兩方面進行驗證。4.1新數據存儲格式下頻繁讀取數據的性能評估本發明設計了新的數據存儲格式來解決localstorage頻繁讀取數據性能低下的問題，該實驗用來設計驗證新的數據存儲格式的正確性和高性能，實驗使用chrome52瀏覽器進行操作。預先在存儲區域存儲相同數量的數據，并且每條數據的大小保持一致，分別使用本發明的方案和直接使用localstorage訪問相同的數據量，記錄其所消耗的時間。實驗結果如圖5所示。由圖5可以看出，使用本發明設計的新的數據存儲格式訪問數據時，所花費的時間比直接使用localstorage方法訪問時要少幾倍，并且，訪問的數據越多，兩者的差距越大，在數據量為50000時，新方案花費的時間比舊方案少了約7倍的時間，也就是說，使用改進的方案，訪問數據量越大，訪問時間越少，訪問速度更快，性能更佳。那么，為什么會造成這兩種方案的性能存在如此大的差異？localstorage方法所存儲的數據是放在硬盤上的，從localstorage讀取多少次數據，就需要從硬盤上讀取多少次數據。由于cpu只能直接訪問內存中的數據，所以從硬盤上讀取數據首先需要從硬盤中找到該數據，然后將其傳輸到內存中，如此才能進行訪問操作。這也就意味著，從localstorage中讀取一次數據的時間等于磁盤中數據查找的時間和數據傳輸時間之和。本發明的改進方案是先取出某區域內所有數據，然后轉換為json對象進行取值，這一過程中只需要從localstorage中取一次數據。這樣的話，本發明的方案訪問數據的總時間等于從localstorage中訪問一次數據的時間與從json對象中取值的時間之和。從json對象中取值時，是由js代碼運行的，瀏覽器在加載頁面時，會將js代碼加載到為瀏覽器分配的內存中，那么從json中獲取數據就相當于只需要從內存中獲取數據。表3是從json對象中訪問數據量與所需花費的時間的關系表示。表3從json中訪問數據的次數與訪問時間的關系表json中訪問的數據所占字符數與使用圖5的實驗訪問數據所占字符數相同，并且一次只訪問一條數據，所以訪問數據個數與訪問次數是等價的。將表3中的數據與圖5中使用改進方案的數據進行比較，在訪問數據量相同的情況下從json中訪問數據的訪問時間與改進方案中所消耗的訪問時間相比較，相差1ms左右，這也就意味著本方案的訪問時間消耗在從json中獲取數據這一步驟上，而從localstorage中訪問一次大數據的時間只需要1ms左右。通過上述分析，可以得出結論：造成兩種方案的差距如此之大的原因在于從json對象中讀取數據的速度比從localstorage讀取數據的速度快。改進的方案大大減少了直接從localstorage中獲取數據的次數。因此，對于需要對某類數據進行頻繁訪問時，使用本發明設計的方案降低訪問負擔，減少訪問時間。對于每優化一毫秒，就能提高6％的web前端性能來說，本發明設計的方案的效果顯著，是可行的。4.2優化存儲方案的性能分析衡量web前端的性能指標主要有頁面加載時間(userlatency或sitespeed)進行考量，它是衡量應用程序可用性的一個重要指標，指的是頁面從加載開始到加載完成所消耗的時間，該指標可以從整體上反映應用程序的訪問速度，并且本發明的方案是通過對頁面加載過程中的客戶端渲染階段進行性能優化的。該實驗使用myeclipse8.5進行開發，tomcat7作為web服務器，mysql5.5作為數據庫，ie9作為測試瀏覽器，使用httpwatch記錄實驗結果，外在實驗環境保持一致。該實驗為了簡化操作，只是簡單的設計了一個首頁main.jsp，頁面元素包含js文件、css文件和圖片等，為了減少實驗誤差，除了存儲方案不同外，其他的頁面數據和相關條件均保持一致，整個實驗過程中只打開該頁面，最大程度的保證各個實驗產生的差距是由實驗設置的關鍵因素造成的，盡量保證實驗的準確性。首先測試的是不同的數據類型在使用本發明的緩存優化方案和無緩存的條件下的加載時間。本地緩存的數據主要有js文件、css文件和圖片，每次只單獨存儲一種類型，分別測試這三種文件的載入時間。各資源在使用緩存前后的加載時間情況如表4所示。表4不同數據類型的緩存效果通過對上表的結果分析，使用緩存機制，瀏覽器不需從服務器加載資源，直接從本地緩存中獲取資源，眾所周知，操作本地內存中的資源比操作服務器上的資源的速度高多個數量級，因此優化方案可加速網頁各項元素載入的時間，速度提升了數倍，從而可以減少頁面的總加載時間，效果顯著。另外，對整個頁面的響應時間進行實驗，實驗場景分為使用本發明的存儲方案進行數據存儲和直接獲取數據，無任何緩存。兩種場景下緩存的數據保持一致，每完成一種情況的測試，清除所有緩存，頁面其他元素保持不變，記錄首次訪問和之后訪問4次的頁面加載時間，實驗結果如表5所示。表5頁面響應時間比較(單位：s)根據上述結果，繪制對比折線圖，如圖6所示。在首次訪問頁面時，使用本發明改進的緩存方案時，由于存儲數據的各項操作的消耗，加載時間加長。第二次訪問時，應用本發明的緩存方案，加載頁面的響應時間比不使用緩存減少了大約50％，相比首次訪問頁面的時間明顯降低，這是因為在首次請求后，頁面的部分數據已被緩存，而后續在加載頁面時，頁面的加載時間與第二次訪問時基本無變化。參考文獻：[1]lubbersp,salimf,albersb.prohtml5programming.usa:apress,2011.5-304.[2]張紫薇.web前端性能優化的研究與應用[d].成都：電子科技大學,2010.[3]尹樂,許剛強.基于html5的離線web應用設計與實現[j].中國高新技術企業,2014,(12):17-19.[4]劉繼.html5中extjs和websqldatabase的使用[j].信息通信,2015,(09):129-130.[5]王成,李少元,鄭黎曉,緱錦,曾梅琴,劉慧敏.web前端性能優化方案與實踐[j].計算機應用與軟件,2014,(12):89-95+147.[6]brucelawson,remysharp.html5用戶指南[m].機械工業出版社.2011.[7]ianhickson.webstorageeditor’sdraft17january2014[eb/ol].[2014-01-17].//dev.w3.org/html5/webstorage/.[8]oehlmand,blancs.proandroidwebapps.usa:apress,2011.47-63。當前第1頁12