引言

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

1 主要的前端存儲技術

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

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

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

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

    (4)User Data.其是微軟為IE專門在系統(tǒng)中開辟的一塊存儲空間，只支持Windows+IE的組合，在XP操作系統(tǒng)中，一般位于C：\Documents and Set-tings、用戶名、UserData，有時候會在C：＼Documentsand Settings＼用戶名＼Application Data＼Microsoft＼Internet Explorer＼UserData下，在Vista操作系統(tǒng)中，位于C：、Users＼用戶名、AppData＼ROAming＼Mi-crosoft＼Intemet Explorer＼UserData，使用save和load方法可將UserData存儲區(qū)數(shù)據(jù)保存在緩存中，一旦保存后，即使瀏覽器關閉，下一次進入該頁面，數(shù)據(jù)仍然存在，對單個文件的大小限制是128 KB，一個域名下總共可以保存1024 KB的文件，文件個數(shù)沒有限制，在受限站點里這兩個值分別是64 KB和640KB，所以如果考慮到各種情況的話，單個文件以控制在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，是指用戶在瀏覽網頁的時候，從進入網頁開始到瀏覽器關閉的這段時間內，將數(shù)據(jù)保存在session對象中，這里的session對象可以用來保存在此時間段內的所有需要存儲的數(shù)據(jù)，具體為：

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

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

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

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

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

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

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

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

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

    storage對象，setltem( key，value)，

    2.2離線存儲

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

    Web應用程序的本地緩存是通過頁面的Manifest文件來管理的，Manifest是一個位于Web服務器上的文件，它以清單的形式展示了需要緩存和不需要緩存的文件，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，它的作用是告知瀏覽器，此時需要對資源文件進行緩存處理操作。

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

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

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

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

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

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

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

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

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

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

    (2)通過SQL語法進行數(shù)據(jù)操作，在實際操作時，需要調用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ù)轉為保存在客戶端本地，從而大大提高了Web應用程序的性能，減輕了服務器端的負擔，相信隨著網絡技術的進步，Web應用將重新回到“客戶端為重、服務器端為輕”的模式下。

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

轉載請注明出處：拓步ERP資訊網http://www.ezxoed.cn/

本文標題：基于HTML 5的前端本地化存儲技術

本文網址：http://www.ezxoed.cn/html/support/1112156162.html