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

李燁民

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

0 引言

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

1 主要的前端存儲技術

目前，本地存儲技術主要有Cookie，Flash SharedObject，Google Gears和User Data.

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

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

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

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

2 HTML 5本地存儲技術

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

2.1 Web Storage

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

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

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

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

清除數據:sessionStorage.clear().

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

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

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

清除數據:localStorage.clear().

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

2.2 離線存儲

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

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

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

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

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

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

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

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

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

2.3 Web數據庫

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

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

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

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

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

3 各瀏覽器兼容性

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

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

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

4 結論

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

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

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

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

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