李燁民

(四川大學(xué)計(jì)算機(jī)學(xué)院，四川成都 610065)

0 引言

目前，Web 2.0給互聯(lián)網(wǎng)用戶帶來(lái)了新的網(wǎng)絡(luò)應(yīng)用方法，具有誘人的應(yīng)用前景，本地化存儲(chǔ)一直是本地客戶端程序優(yōu)于Web應(yīng)用程序的一個(gè)方面.對(duì)于本地應(yīng)用程序，操作系統(tǒng)會(huì)提供一個(gè)抽象層，用于存儲(chǔ)和獲取特定于應(yīng)用程序的數(shù)據(jù).這些數(shù)據(jù)可以存儲(chǔ)于注冊(cè)表、INI文件，或者其他什么地方，這取決于操作系統(tǒng)的實(shí)現(xiàn).如果本地應(yīng)用程序需要不單是鍵值對(duì)形式的本地存儲(chǔ)，可以使用嵌入式數(shù)據(jù)庫(kù)或其他很多種解決方案.HTML 5本地存儲(chǔ)技術(shù)提供了一種方式讓網(wǎng)站能夠把信息存儲(chǔ)到本地的計(jì)算機(jī)上，并在以后需要的時(shí)候進(jìn)行獲取.這個(gè)概念和Cookie相似，區(qū)別則是它是為更大容量存儲(chǔ)設(shè)計(jì)的，而Cookie的大小是受限的，并且每次請(qǐng)求一個(gè)新的頁(yè)面時(shí)候，Cookie都會(huì)被發(fā)送過(guò)去.HTML 5的Storage是存儲(chǔ)在計(jì)算機(jī)上的，網(wǎng)站在頁(yè)面加載完畢后可以通過(guò)Javascript來(lái)獲取這些數(shù)據(jù).

1 主要的前端存儲(chǔ)技術(shù)

目前，本地存儲(chǔ)技術(shù)主要有Cookie，F(xiàn)lash SharedObject，Google Gears和User Data.

(1)Cookie.在Web中得到廣泛應(yīng)用，但其局限性非常明顯，容量太小，有些站點(diǎn)會(huì)因?yàn)槌鲇诎踩目紤]而禁用Cookie，因?yàn)镃ookie的內(nèi)容會(huì)隨著頁(yè)面請(qǐng)求一并發(fā)往服務(wù)器.

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

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

(4)User Data.其是微軟為IE專門(mén)在系統(tǒng)中開(kāi)辟的一塊存儲(chǔ)空間，只支持Windows+IE的組合.在XP操作系統(tǒng)中，一般位于C:Documents and Settings用戶名UserData，有時(shí)候會(huì)在C:Documents and Settings用戶名Application DataMicrosoftInternet ExplorerUserData下.在Vista操作系統(tǒng)中，位于C:Users用戶名AppDataRoamingMicrosoft Internet ExplorerUserData.使用save和load方法可將UserData存儲(chǔ)區(qū)數(shù)據(jù)保存在緩存中，一旦保存后，即使瀏覽器關(guān)閉，下一次進(jìn)入該頁(yè)面，數(shù)據(jù)仍然存在.對(duì)單個(gè)文件的大小限制是128 KB，一個(gè)域名下總共可以保存1 024 KB的文件，文件個(gè)數(shù)沒(méi)有限制.在受限站點(diǎn)里這兩個(gè)值分別是64 KB和640 KB，所以如果考慮到各種情況的話，單個(gè)文件以控制在64 KB以下為宜.

2 HTML 5本地存儲(chǔ)技術(shù)

HTML 5技術(shù)的功能之一是本地存儲(chǔ)數(shù)據(jù)并且允許應(yīng)用程序離線運(yùn)行，其有3種不同的處理這些功能的方式:①Web Storage，適用于具有key/value對(duì)的基本本地存儲(chǔ);②離線存儲(chǔ)，利用一個(gè)manifest文件來(lái)高速緩存所有文件以便離線使用;③Web數(shù)據(jù)庫(kù)，適用于關(guān)系型數(shù)據(jù)庫(kù)存儲(chǔ).

2.1 Web Storage

在HTML 5技術(shù)標(biāo)準(zhǔn)中，除了動(dòng)態(tài)圖像、位置服務(wù)、多媒體播放功能外，另一個(gè)新增的非常重要的功能就是可以在客戶端本地保存數(shù)據(jù)的Web storage功能.該功能使用key/value對(duì)來(lái)支持存儲(chǔ)被Web應(yīng)用程序訪問(wèn)基本信息和變量.具體來(lái)說(shuō)，有以下2種方式.

(1)sessionStorage.session，是指用戶在瀏覽網(wǎng)頁(yè)的時(shí)候，從進(jìn)入網(wǎng)頁(yè)開(kāi)始到瀏覽器關(guān)閉的這段時(shí)間內(nèi)，將數(shù)據(jù)保存在session對(duì)象中，這里的session對(duì)象可以用來(lái)保存在此時(shí)間段內(nèi)的所有需要存儲(chǔ)的數(shù)據(jù).具體為:

保存數(shù)據(jù):sessionStorage.setItem(key，value).

讀取數(shù)據(jù):變量=sessionStroage.getItem(key).

清除數(shù)據(jù):sessionStorage.clear().

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

保存數(shù)據(jù):localStorage.setItem(key，value).

讀取數(shù)據(jù):變量=localStorage.getItem(key).

清除數(shù)據(jù):localStorage.clear().

需說(shuō)明的是，以上2種方式在保存數(shù)據(jù)時(shí)均采用按鍵名/鍵值的形式，保存后可以修改鍵值，但不允許修改鍵名.為了避免保存時(shí)使用到重復(fù)的鍵名，可以使用當(dāng)前日期和時(shí)間作為鍵名來(lái)保存，其JavaScript代碼為:

2.2 離線存儲(chǔ)

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

Web應(yīng)用程序的本地緩存是通過(guò)頁(yè)面的Manifest文件來(lái)管理的.Manifest是一個(gè)位于Web服務(wù)器上的文件，它以清單的形式展示了需要緩存和不需要緩存的文件.Manifest文件的示例為:

在Manifest文件中，第一行必須是CACHE MAINFEST，它的作用是告知瀏覽器，此時(shí)需要對(duì)資源文件進(jìn)行緩存處理操作.

一般地，緩存處理操作分為以下3種:

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

(2)FALLBACK.該類別每行具有2個(gè)指定的文件，當(dāng)有網(wǎng)絡(luò)的情況下訪問(wèn)第一個(gè)資源文件，當(dāng)沒(méi)有網(wǎng)絡(luò)的情況下訪問(wèn)第二個(gè)資源文件，其為可選項(xiàng).

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

通常，可以為每一個(gè)頁(yè)面文件單獨(dú)指定一個(gè)Manifest文件，也可以僅對(duì)整個(gè)應(yīng)用指定一個(gè)Manifest文件，具體步驟為:

需要說(shuō)明的是，在使用Manifest文件時(shí)，要對(duì)服務(wù)器進(jìn)行設(shè)置，讓所運(yùn)行的服務(wù)器支持text/cachemanifest這個(gè)類型，不同的服務(wù)器具體的設(shè)置有所區(qū)別.

2.3 Web數(shù)據(jù)庫(kù)

對(duì)于簡(jiǎn)單的數(shù)據(jù)存儲(chǔ)，sessionStorage和 localStorage能夠很好地完成，但對(duì)瑣碎的關(guān)系型數(shù)據(jù)進(jìn)行處理時(shí)，其就無(wú)能為力了.此時(shí)，Web數(shù)據(jù)庫(kù)可以很好地解決問(wèn)題.

在HTML 4中，數(shù)據(jù)庫(kù)只能放在服務(wù)器端，客戶端只能通過(guò)發(fā)送請(qǐng)求的方式獲取到遠(yuǎn)程數(shù)據(jù)，而在HTML 5中，內(nèi)置了一個(gè)可以通過(guò)SQL語(yǔ)法來(lái)訪問(wèn)的數(shù)據(jù)庫(kù)，其具體步驟是:

(1)通過(guò)JavaScript腳本創(chuàng)建訪問(wèn)數(shù)據(jù)庫(kù)的對(duì)象:var db=openDatabase(‘dbname’，‘1.0.0’，‘DB Info’，‘200000’)，第一個(gè)參數(shù)是數(shù)據(jù)庫(kù)的名字，第二個(gè)參數(shù)是版本編號(hào)，第三個(gè)參數(shù)是描述信息，第四個(gè)參數(shù)是數(shù)據(jù)庫(kù)的大小.

(2)通過(guò)SQL語(yǔ)法進(jìn)行數(shù)據(jù)操作.在實(shí)際操作時(shí)，需要調(diào)用transaction方法，其方法是，

需要注意的是，函數(shù)具有一個(gè)事務(wù)類型的參數(shù)(tx)，該事務(wù)參數(shù)具有一個(gè)函數(shù)executeSql()，包含SQL操作語(yǔ)句、相應(yīng)的數(shù)據(jù)與時(shí)間、一個(gè)成功時(shí)執(zhí)行的函數(shù)和一個(gè)失敗時(shí)執(zhí)行的函數(shù).

3 各瀏覽器兼容性

由于HTML 5的技術(shù)標(biāo)準(zhǔn)才制訂不久，加之瀏覽器各版本的歷史原因，各瀏覽器廠商還沒(méi)有完全兼容HTML 5的所有標(biāo)準(zhǔn).各瀏覽器對(duì)本地存儲(chǔ)的支持度如表1所示.

表1 各瀏覽器對(duì)本地存儲(chǔ)的支持度

由表1可知，F(xiàn)irefox，Safari，Chrome，Opera瀏覽器對(duì)新型前端本地化存儲(chǔ)有相當(dāng)好的兼容性處理，而IE家族相對(duì)落后，但隨著Windows 7及IE高版本瀏覽器的普及，相信在不久的將來(lái)，HTML 5技術(shù)標(biāo)準(zhǔn)支持的本地化存儲(chǔ)技術(shù)將得到更廣泛的應(yīng)用.

4 結(jié)論

HTML 5將成為新一代瀏覽器的技術(shù)標(biāo)準(zhǔn)，它在給新的Web應(yīng)用程序帶來(lái)無(wú)限可能性的同時(shí)，還能帶來(lái)更快、更好、更炫的用戶體驗(yàn).HTML 5的本地化存儲(chǔ)技術(shù)，通過(guò)添加更多功能將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶端本地，從而大大提高了Web應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān).相信隨著網(wǎng)絡(luò)技術(shù)的進(jìn)步，Web應(yīng)用將重新回到“客戶端為重、服務(wù)器端為輕”的模式下.

［1］馬新強(qiáng)，孫兆，袁哲，等.Web標(biāo)準(zhǔn)與HTML 5的核心技術(shù)研究［J］.重慶文理學(xué)院學(xué)報(bào)，2010，29(6):61－64.

［2］黃敏，張衛(wèi)東，李眾立.Web緩存技術(shù)的應(yīng)用與研究［J］.計(jì)算機(jī)工程與設(shè)計(jì)，2003，24(5):33－35.

［3］劉彤，周工業(yè)，倪漿銘.HTML瀏覽器的設(shè)計(jì)與分析［J］.計(jì)算機(jī)工程與應(yīng)用，2001，38(9):117－119.

［4］王明超，陳榕.基于腳本的客戶端軟件結(jié)構(gòu)化存儲(chǔ)技術(shù)研究［J］.計(jì)算機(jī)技術(shù)與發(fā)展，2010，20(2):25－28.

［5］Stephen C.Browser War Centers on Once-obscure JavaScript［EB/OL］.［2009－03－20］.http://news.cnet.corn/browser-war-centers-on·once-obscure-javascript/es/79891.htm.

［6］熊忠陽(yáng)，張玉芳，吳中福.三層結(jié)構(gòu)中的數(shù)據(jù)庫(kù)訪問(wèn)技術(shù)［J］.計(jì)算機(jī)科學(xué)，2000，27(4):95－97.