基于HTML 5的前端本地化存儲技術

李燁民

(四川大學計算機學院，四川成都 610065)

0 引言

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

1 主要的前端存儲技術

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

(1)Cookie.在Web中得到廣泛應用，但其局限性非常明顯，容量太小，有些站點會因為出于安全的考慮而禁用Cookie，因為Cookie的內(nèi)容會隨著頁面請求一并發(fā)往服務器.

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

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

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

2 HTML 5本地存儲技術

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

2.1 Web Storage

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

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

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

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

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

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

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

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

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

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

2.2 離線存儲

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

Web應用程序的本地緩存是通過頁面的Manifest文件來管理的.Manifest是一個位于Web服務器上的文件，它以清單的形式展示了需要緩存和不需要緩存的文件.Manifest文件的示例為:

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

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

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

(2)FALLBACK.該類別每行具有2個指定的文件，當有網(wǎng)絡的情況下訪問第一個資源文件，當沒有網(wǎng)絡的情況下訪問第二個資源文件，其為可選項.

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

通常，可以為每一個頁面文件單獨指定一個Manifest文件，也可以僅對整個應用指定一個Manifest文件，具體步驟為:

需要說明的是，在使用Manifest文件時，要對服務器進行設置，讓所運行的服務器支持text/cachemanifest這個類型，不同的服務器具體的設置有所區(qū)別.

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

對于簡單的數(shù)據(jù)存儲，sessionStorage和 localStorage能夠很好地完成，但對瑣碎的關系型數(shù)據(jù)進行處理時，其就無能為力了.此時，Web數(shù)據(jù)庫可以很好地解決問題.

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

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

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

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

3 各瀏覽器兼容性

由于HTML 5的技術標準才制訂不久，加之瀏覽器各版本的歷史原因，各瀏覽器廠商還沒有完全兼容HTML 5的所有標準.各瀏覽器對本地存儲的支持度如表1所示.

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

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

4 結論

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

［1］馬新強，孫兆，袁哲，等.Web標準與HTML 5的核心技術研究［J］.重慶文理學院學報，2010，29(6):61－64.

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

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

［4］王明超，陳榕.基于腳本的客戶端軟件結構化存儲技術研究［J］.計算機技術與發(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］熊忠陽，張玉芳，吳中福.三層結構中的數(shù)據(jù)庫訪問技術［J］.計算機科學，2000，27(4):95－97.