引言

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

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

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

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

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

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

    (4)User Data.其是微軟為IE專門在系統(tǒng)中開辟的一塊存儲(chǔ)空間，只支持Windows+IE的組合，在XP操作系統(tǒng)中，一般位于C：\Documents and Set-tings、用戶名、UserData，有時(shí)候會(huì)在C：＼Documentsand Settings＼用戶名＼Application Data＼Microsoft＼Internet Explorer＼UserData下，在Vista操作系統(tǒng)中，位于C：、Users＼用戶名、AppData＼ROAming＼Mi-crosoft＼Intemet Explorer＼UserData，使用save和load方法可將UserData存儲(chǔ)區(qū)數(shù)據(jù)保存在緩存中，一旦保存后，即使瀏覽器關(guān)閉，下一次進(jìn)入該頁面，數(shù)據(jù)仍然存在，對(duì)單個(gè)文件的大小限制是128 KB，一個(gè)域名下總共可以保存1024 KB的文件，文件個(gè)數(shù)沒有限制，在受限站點(diǎn)里這兩個(gè)值分別是64 KB和640KB，所以如果考慮到各種情況的話，單個(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文件來高速緩存所有文件以便離線使用；③Web數(shù)據(jù)庫，適用于關(guān)系型數(shù)據(jù)庫存儲(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ì)來支持存儲(chǔ)被Web應(yīng)用程序訪問基本信息和變量，具體來說，有以下2種方式。

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

    保存數(shù)據(jù)：sessionStorage，setltem( key，value)，

    讀取數(shù)據(jù)：變量=sessionStroage，getltem( key)，

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

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

    保存數(shù)據(jù)：localStorage，setltem( key，value)，

    讀取數(shù)據(jù)：變量= localStorage. getltem( key)，

    清除數(shù)據(jù)：localStorage， clear()，

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

    var key= new Date().getTime();

    storage對(duì)象，setltem( key，value)，

    2.2離線存儲(chǔ)

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

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

    CACHE MANIFEST

    CACHE:

    welcorne. html

    stle，css

    scnpt.js

    img/search.png

    img/logo.png

    NETWORK:

    index.html

    FALIBACK:

    linel.js line2.js

    loginl.htmllogin2，html

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

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

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

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

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

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

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

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

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

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

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

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

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

3 各瀏覽器兼容性

    由于HTML 5的技術(shù)標(biāo)準(zhǔn)才制訂不久，加之瀏覽器各版本的歷史原因，各瀏覽器廠商還沒有完全兼容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高版本瀏覽器的普及，相信在不久的將來，HTML 5技術(shù)標(biāo)準(zhǔn)支持的本地化存儲(chǔ)技術(shù)將得到更廣泛的應(yīng)用。

4 結(jié)論

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

核心關(guān)注：拓步ERP系統(tǒng)平臺(tái)是覆蓋了眾多的業(yè)務(wù)領(lǐng)域、行業(yè)應(yīng)用，蘊(yùn)涵了豐富的ERP管理思想，集成了ERP軟件業(yè)務(wù)管理理念，功能涉及供應(yīng)鏈、成本、制造、CRM、HR等眾多業(yè)務(wù)領(lǐng)域的管理，全面涵蓋了企業(yè)關(guān)注ERP管理系統(tǒng)的核心領(lǐng)域，是眾多中小企業(yè)信息化建設(shè)首選的ERP管理軟件信賴品牌。

轉(zhuǎn)載請(qǐng)注明出處：拓步ERP資訊網(wǎng)http://www.oesoe.com/

本文標(biāo)題：基于HTML 5的前端本地化存儲(chǔ)技術(shù)

本文網(wǎng)址：http://www.oesoe.com/html/support/1112156162.html