數(shù)據(jù)顯示，全球互聯(lián)網(wǎng)用戶以及智能手機(jī)用戶的數(shù)量，增幅正在逐漸放緩。但是，移動數(shù)據(jù)流量卻取得爆炸式的增長，其年度增幅達(dá)到了81%，且增長速度正在加快。

移動數(shù)據(jù)流量增幅逐漸攀升用戶越來越依賴于移動終端提供的日常社交、獲取信息、商業(yè)買賣等服務(wù)。大量的訪問，提升了服務(wù)器端負(fù)載壓力。移動終端常常會出現(xiàn)頁面加載緩慢的狀況，這會大大降低終端客戶體驗(yàn)。如果將資源文件、代碼邏輯文件、結(jié)構(gòu)文件、樣式文件緩存在終端設(shè)備上，不僅能夠降低服務(wù)器壓力，還能夠減少網(wǎng)絡(luò)延遲、減少網(wǎng)絡(luò)帶寬消耗、減少終端用戶流量成本。

HTML5又給本地化帶來更多的選擇。目前前端緩存技術(shù)從技術(shù)類型分成傳統(tǒng)本地化技術(shù)與HTML5本地化技術(shù)兩類，如圖2所示：

傳統(tǒng)本地化技術(shù)又細(xì)分為Cookie，F(xiàn)lash Sharedobject，Goole Gears和User Data。

(1)Cookie，在Web中得到廣泛應(yīng)用，但其局限性非常明顯，容量太小，早期有些站點(diǎn)會因?yàn)槌鲇诎踩目紤]而禁用Cookie，因?yàn)镃ookie的內(nèi)容會隨著頁面請求一并發(fā)往服務(wù)器當(dāng)前Cookie已經(jīng)被各大網(wǎng)站完全支持，在UAP各個(gè)web平臺也一并支持。

(2)Flash SharedObject，其使用的是kissy的store模塊來調(diào)用Flash SharedObject。Flash SharedObject的優(yōu)點(diǎn)是容量適中，基本上解決了兼容性問題，缺點(diǎn)是要在頁面中引入特定的swf和js文件，增加額外的HTTP請求負(fù)擔(dān)，且處理繁瑣。

(3)Google Gears是一個(gè)基于Firefox和IE的插件，要使用它，必須先安裝相應(yīng)插件，但其官方網(wǎng)站目前已經(jīng)停止更新。

(4)User Data其是微軟為IE專門在系統(tǒng)中開辟的一塊存儲空間，只支持Windows+IE的組合，IE的UserData能夠存儲完整的XML文檔，并且會將復(fù)雜的數(shù)據(jù)類型轉(zhuǎn)換為XML存儲起來。通過這種方式，數(shù)據(jù)會被插入到XML數(shù)據(jù)島(另一項(xiàng)只有IE中才存在的功能)中。然后整個(gè)XML數(shù)據(jù)島再被存入U(xiǎn)serData中。使用save和load方法可將UserData存儲區(qū)數(shù)據(jù)保存在緩存中，一旦保存后，即使瀏覽器關(guān)閉，下一次進(jìn)入該頁面，數(shù)據(jù)仍然存在，對單個(gè)文件的大小限制是128 KB，一個(gè)域名下總共可以保存1024 KB的文件，文件個(gè)數(shù)沒有限制，在受限站點(diǎn)里這兩個(gè)值分別是64 KB和640KB，所以如果考慮到各種情況的話，單個(gè)文件以控制在64 KB以下為宜。由于它概念模糊、使用困難，并且只能用于Internet Explorer，所以很少有Web開發(fā)人員會使用這種存儲方式，大多數(shù)的開發(fā)人員甚至完全不知道存在這種技術(shù)。

HTML5本地化技術(shù)的功能之一是本地存儲數(shù)據(jù)并且允許應(yīng)用程序在無網(wǎng)絡(luò)時(shí)離線運(yùn)行，有三種不同技術(shù)： Web Storage，適用于具有key/value對的基本本地存儲;離線存儲，利用一個(gè)manifest文件來高速緩存所有文件以便離線使用;Web數(shù)據(jù)庫，適用于關(guān)系型數(shù)據(jù)庫存儲。

在HTML5技術(shù)標(biāo)準(zhǔn)中一個(gè)非常重要的功能就是可以在客戶端本地保存數(shù)據(jù)的Web storage功能，該功能使用key/value對來支持存儲被Web應(yīng)用程序訪問信息和變量，具體來說，有以下2種方式。

(1)sessionStorage.session，是指用戶在瀏覽網(wǎng)頁的時(shí)候，從進(jìn)入網(wǎng)頁開始計(jì)算到瀏覽器關(guān)閉的這段生命周期內(nèi)，將數(shù)據(jù)保存在session對象中，這里的session對象可以用來保存在此生命周期內(nèi)的所有需要存儲的數(shù)據(jù)。

(2)localStorage不同于sessionStorage，localStorage將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備中，通常是硬盤，即使關(guān)閉了瀏覽器，該數(shù)據(jù)依然存在，下次訪問的時(shí)候仍然可以繼續(xù)使用。

目前，Web應(yīng)用程序已經(jīng)變得越來越成熟了，僅通過Web Storage存儲一些基本數(shù)據(jù)已經(jīng)不能滿足用戶提升響應(yīng)的需求，為了讓整個(gè)應(yīng)用程序在沒有網(wǎng)絡(luò)的離線狀態(tài)下也能夠正常工作，就必須把構(gòu)成該應(yīng)用的Flash、圖片、CSS、HTML、JS等大量文件存放在本地存儲中，此時(shí)，即便計(jì)算機(jī)沒有與網(wǎng)絡(luò)連接，也可以通過本地的資源文件來運(yùn)行離線Web應(yīng)用程序。

Web應(yīng)用程序的本地緩存是通過頁面的Manifest文件來管理的，Manifest是一個(gè)位于Web服務(wù)器上的文件，它以清單的形式展示了需要緩存和不需要緩存的文件。在Manifest文件中，第一行是CACHE MAINFEST，它將是通知瀏覽器，需要對資源文件列表進(jìn)行緩存處理操作。

一般地，緩存處理操作如圖3所示分為以下3種：

(1)CACHE該類別指定了需要被緩存到本地的資源文件，其為可選項(xiàng)。

(2)FALLBACK該類別每行具有倆個(gè)指定的文件，在有網(wǎng)絡(luò)的情況下第一個(gè)資源文件被訪問，在沒有網(wǎng)絡(luò)的情況下第二個(gè)資源文件被訪問，其為可選項(xiàng)。

(3)NETWORK該類別下的文件是不會被緩存到本地，這些文件必須在有網(wǎng)絡(luò)的情況下才能使用，其為可選項(xiàng)。

通常，可以為每一個(gè)頁面文件單獨(dú)指定一個(gè)Manifest文件，也可以僅對整個(gè)應(yīng)用指定一個(gè)Manifest文件。需要說明的是，在使用Manifest文件時(shí)，要對服務(wù)器進(jìn)行設(shè)置，讓所運(yùn)行的服務(wù)器支持text/cachemanifest這個(gè)類型，不同的服務(wù)器具體的設(shè)置有所區(qū)別。

對于簡單的數(shù)據(jù)存儲，sessionStorage和localStorage能夠很好地完成，但對瑣碎的關(guān)系型數(shù)據(jù)進(jìn)行處理時(shí)，其就無能為力了，此時(shí)Web數(shù)據(jù)庫可以很好地解決問題。在HTML4中，數(shù)據(jù)庫只能放在服務(wù)器端，客戶端只能通過發(fā)送請求的方式獲取到遠(yuǎn)程數(shù)據(jù)，而在HTML5中，內(nèi)置了一個(gè)可以通過SQL語法來訪問的數(shù)據(jù)庫，其具體步驟是：

(1)通過JavaScript腳本創(chuàng)建訪問數(shù)據(jù)庫的對象，參數(shù)依次為數(shù)據(jù)庫名、版本號、描述信息、數(shù)據(jù)大小。

var db = openDatabase (’dbname’,’1.0.0’,’DB Info’,’200000’);

(2)通過SQL語法進(jìn)行數(shù)據(jù)操作，需要調(diào)用transaction方法。

上述是從技術(shù)角度介紹如何使用緩存技術(shù)，下面從存儲介質(zhì)角度分析緩存類型，Web緩存從存儲介質(zhì)角度又可以分為Relation，Object，F(xiàn)ile三層，如圖4所示。每層利用相應(yīng)緩存技術(shù)，以提升網(wǎng)站響應(yīng)速度，減少HTTP請求，減少后臺壓力。

Relation：這一級保存了后臺session信息，權(quán)限信息，頁面中的全局狀態(tài)信息，這些信息的特點(diǎn)是體積小，關(guān)系重要。所以在存儲上要重視賽選。

Object：這個(gè)層面是后臺返回的數(shù)據(jù)。數(shù)據(jù)應(yīng)該滿足數(shù)量大，不易變的數(shù)據(jù)。同時(shí)這個(gè)層級要對數(shù)據(jù)做刷新機(jī)制和過期時(shí)間設(shè)置，保證數(shù)據(jù)的正常更新。

File：對頁面中的靜態(tài)資源文件進(jìn)行緩存，文件緩存是離線應(yīng)用的重點(diǎn)操作。不僅能夠提高訪問效率，減少HTTP請求，還可以使頁面在脫離網(wǎng)絡(luò)的情況下繼續(xù)正常使用

經(jīng)過上述三級緩存，減少了HTTP請求數(shù)量，加快響應(yīng)速度，減少后臺的數(shù)據(jù)響應(yīng)次數(shù)，網(wǎng)站的響應(yīng)效率提升50%以上。

兼容性方面，HTML5的技術(shù)標(biāo)準(zhǔn)在IE老版本瀏覽器中缺乏支持，各瀏覽器對本地存儲的支持度如表1所示。

表1 各瀏覽器對本地存儲的支持度

Firefox，Safari，Chrome，Opera瀏覽器對新型前端本地化存儲有相當(dāng)好的兼容性處理，而IE家族相對落后，但隨著Windows 7及IE高版本瀏覽器的普及，相信在不久的將來，HTML5技術(shù)標(biāo)準(zhǔn)支持的本地化存儲技術(shù)將得到更廣泛的應(yīng)用。

HTML工作小組于2014年10月28日正式公布HTML5作為W3C新的推薦標(biāo)準(zhǔn)，其定義為超文本標(biāo)記語言(即HTML)的第五個(gè)版本。它主要用于構(gòu)建一般性的web頁面以及復(fù)雜的應(yīng)用程序。HTML5為開放式的Web平臺的建設(shè)奠定了強(qiáng)有力的基石。HTML5的本地化存儲技術(shù)作為HTML5的主要功能，將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶端本地，從而大大提高了Web應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān)，相信隨著網(wǎng)絡(luò)技術(shù)的進(jìn)步，相信HTML5本地化會在Web應(yīng)用中起到重要作用。

用友UAP平臺在本地化緩存方面，從Relation和Object層級上已經(jīng)做了很多的嘗試，同時(shí)也取得很好的效果，F(xiàn)ile層級由于瀏覽器兼容不好，采用優(yōu)雅降級的方式融合到項(xiàng)目中，利用本地化的技術(shù)手段，大幅提升了UAP產(chǎn)品的響應(yīng)速度。