淺析HTML5 數(shù)據(jù)存儲的方法及應(yīng)用

瞿蘇

摘要：在 HTML5標(biāo)準(zhǔn)之前，Web存儲信息需要cookie來完成，Web Storage存儲機制是對HTML4中cookies存儲機制的一個改善。由于cookies存儲機制有很多缺點，HTML5中不再使用它，轉(zhuǎn)而使用改良后的Web Storage存儲機制。

關(guān)鍵詞：HTML5；本地存儲；Web Storage

中圖分類號：TP37 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2016）13-0011-03

Abstract：： Before the HTML standard， Web information stored need cookies to complete. But is probably the appearance of 4 KB， and early version only supports IE each domain name dozens of cookies， too little. As they passed by each request to the server， thus obtained is slow and inefficient. Therefore， in HTML， Web storage API for users to store user information on the computer or device for the definition of data standards.

Key words： HTML5；local store；Web Storage

1 HTML5本地存儲簡介

HTML5中新增的功能之一是本地數(shù)據(jù)庫，使用本地數(shù)據(jù)庫可以在客戶端本地建立一個數(shù)據(jù)庫，該數(shù)據(jù)庫以前是必須要保存在服務(wù)器端數(shù)據(jù)庫中的內(nèi)容，現(xiàn)在可以直接保存在客戶端本地了，這大大減輕了服務(wù)器端的負(fù)擔(dān)，同時也加快了訪問數(shù)據(jù)的速度。該技術(shù)在網(wǎng)頁中把鍵值對存儲瀏覽器客戶端，這些數(shù)據(jù)可以跨越瀏覽器的刷新以及關(guān)閉和重新打開。對于HTML5規(guī)范的一部分接口，可以依賴任何第三方插件，瀏覽器都可以原生支持。

本文主要分析HTML5的本地存儲技術(shù)，以Firefox瀏覽器為例介紹 HTML5的幾種本地存儲技術(shù)。

本地存儲的方法為：Web Storage（又分為LocalStorage 和Session Storage）、Web SQL等。不同的場合使用不同種類的本地存儲方法。下面將分別介紹這幾種本地存儲機制。

2 Web Storage簡介

在Web上存儲數(shù)據(jù)的功能，即Web Storage功能。Web Storage功能的存儲主要是針對客戶端本地。Web Storage的存儲功能包含session Storage 和local Storage兩種不同的存儲類型。session Storage和local Storage，它們都能支持在同域下存儲5MB數(shù)據(jù)，這相比cookies有著明顯的優(yōu)勢，這是能夠正確區(qū)分會話數(shù)據(jù)和長期數(shù)據(jù)。

2.1 session Storage對象

Session即會話，是針對一個會話， session Storage則是將數(shù)據(jù)保存在session對象中。用戶在瀏覽網(wǎng)站時，用戶從打開網(wǎng)站到關(guān)閉網(wǎng)站所經(jīng)過的整個時間，這段時間就是用戶瀏覽網(wǎng)站所花費的時間。其中任何數(shù)據(jù)都保存在session對象中，同時僅在同一的會話頁面中，數(shù)據(jù)才能訪問，一旦會話結(jié)束，所有的數(shù)據(jù)將銷毀。

2.2 local Storage對象

local Storage對象則是將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備中，如果瀏覽器被關(guān)閉，但這些數(shù)據(jù)還是存在的。當(dāng)用戶再次打開瀏覽器訪問網(wǎng)站時，local Storage對象中的數(shù)據(jù)仍然可以繼續(xù)使用。由此分析，我們可知臨時保存用Session Storage，永久保存用local Storage。

1）清空local Storage數(shù)據(jù)

local Storage的clear（）函數(shù)用于清空同源的本地存儲數(shù)據(jù)，如local Storage.clear（），它將刪除所有本地存儲的local Storage數(shù)據(jù)。而 Web Storage的另外一部分Session Storage 中的clear函數(shù)只清空當(dāng)前會話存儲的數(shù)據(jù)。

2）遍歷local Storage數(shù)據(jù)

遍歷local Storage數(shù)據(jù)主要用到兩個方法length 和key， length表示中保存的數(shù)據(jù)總量，key表示保存數(shù)據(jù)時的鍵名項，索引號（index）表示第幾條鍵名對應(yīng)的數(shù)據(jù)記錄。索引號（index）以0值開始，如果取第3條鍵名對應(yīng)的數(shù)據(jù)，index值應(yīng)該是2。

“獲取數(shù)據(jù)并存儲”示例

“取出數(shù)據(jù)顯示”示例

在Firefox瀏覽器中，用戶刷新一次頁面，計數(shù)器的數(shù)值將加1。

在Firefox中瀏覽效果，如果用戶刷新一次頁面，計數(shù)器的數(shù)值將加1，如果用戶關(guān)閉瀏覽器窗口，再次打開該網(wǎng)頁，計數(shù)器會繼續(xù)上一次計數(shù)器，而不會重置為1，代碼如下：

綜上所述，Session Storage是一種非持久化的本地存儲，它僅是會話級別的存儲。Local Storage是持久化的本地存儲，只有主動刪除數(shù)據(jù)，數(shù)據(jù)才會過期，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。

3）使用JSON對象存取數(shù)據(jù)

在HTML5中可以使用JSON對象來存取一組相關(guān)的對象。使用JSON對象可以收集一組用戶輸入信息，然后創(chuàng)建一個Object來包含這些信息，之后用一個JSON字符串來表示這個Object，然后把JSON字符串放在local Storage中。當(dāng)用戶檢索指定名稱時，會自動用該名稱去local Storage取得對應(yīng)的JSON字符串，將字符串解析到Object對象，然后依次提取對應(yīng)的信息，并構(gòu)造HTML文本輸入顯示。

3 WebSQL數(shù)據(jù)庫

在HTML5中內(nèi)置了一個可以通過SQL語言來訪問數(shù)據(jù)庫，即Web SQL。Web SQL數(shù)據(jù)庫是能夠在客戶端存儲大量結(jié)構(gòu)化數(shù)據(jù)，是適用于關(guān)系數(shù)據(jù)庫的本地存儲技術(shù)。我們可以使用本地和會話存儲完成對簡單的關(guān)鍵值或簡單對象進(jìn)行存儲，但是如果處理瑣碎的關(guān)系數(shù)據(jù)時，就無能為力了，此時需要WebSQL數(shù)據(jù)庫。對于數(shù)據(jù)庫使用，設(shè)計到打開數(shù)據(jù)庫，執(zhí)行SQL命令。

但需要我們注意的是，在使用服務(wù)器端的一個數(shù)據(jù)庫時，需要關(guān)閉數(shù)據(jù)庫。

Web SQL的 3個核心方法，分別為openDatabase、 transaction、executeSql。

1）打開與創(chuàng)建數(shù)據(jù)庫

可以使用OpenDatabase方法打開一個已經(jīng)存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在，使用此方法將會創(chuàng)建一個新數(shù)據(jù)庫。打開或創(chuàng)建一個數(shù)據(jù)庫的代碼如下。

上述代碼的括號中設(shè)置了五個參數(shù)，括號中的參數(shù)意義依次為數(shù)據(jù)庫名稱、版本號、文字說明、數(shù)據(jù)庫的大小和創(chuàng)建回滾。在操作時，如果“mydb”數(shù)據(jù)庫不存在，將自動創(chuàng)建數(shù)據(jù)庫“mydb”。如果創(chuàng)建的連接不成功，則數(shù)據(jù)庫對象為null。

為了確保應(yīng)用程序有效，并且檢測對 數(shù)據(jù)庫API的支持，還應(yīng)該測試瀏覽器對數(shù)據(jù)庫的支持，所以要進(jìn)行測試，絕不可以假設(shè)該連接成功。

2）執(zhí)行事務(wù)

訪問數(shù)據(jù)庫的時候，還需要使用transaction方法，用來執(zhí)行事務(wù)處理。使用事務(wù)處理，可以防止在對數(shù)據(jù)庫進(jìn)行訪問及執(zhí)行有關(guān)操作的時候收到外界的打擾。因為在WEB上，同時會有許多人都在對頁面進(jìn)行訪問，如果訪問數(shù)據(jù)庫的過程中，正在操作的數(shù)據(jù)被別的用戶給修改掉的話，會引起很多意想不到的后果。

database.transaction（ ）需要一個參數(shù)，該參數(shù)是一個函數(shù)。實際執(zhí)行的查詢服務(wù)如下：

同時可以利用SQL語句為表插入一些新數(shù)據(jù)，也可以管理現(xiàn)有數(shù)據(jù)。

3）SQL操作結(jié)果處理方法

SQL操作結(jié)果2種，分別為成功和失敗。針對成功和失敗這兩種結(jié)果，采取不同的處理方法。

當(dāng)SQL操作結(jié)果為成功時，執(zhí)行的回調(diào)函數(shù)有兩個參數(shù)，分別是執(zhí)行事務(wù)對象、查詢返回的結(jié)果。

當(dāng)SQL操作結(jié)果為失敗時，執(zhí)行的回調(diào)函數(shù)為一個，回調(diào)函數(shù)中僅有一個參數(shù)，即錯誤對象，可以通過此錯誤對象獲知具體的錯誤信息。

總之，在HTML5中，大大豐富了客戶端本地可以存儲的內(nèi)容，添加了許多功能來將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)換為保存在客戶端本地，從而大大提高了WEB應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān)。

4 小結(jié)

通過比較分析幾種存儲技術(shù)，我們了解了要實現(xiàn)設(shè)計系統(tǒng)的離線功能需要將遠(yuǎn)程數(shù)據(jù)庫的數(shù)據(jù)復(fù)制到本地數(shù)據(jù)庫，并選取一種合適的本地存儲技術(shù)。

參考文獻(xiàn)：

[1] 張慧.基于HTML5的本地數(shù)據(jù)庫與服務(wù)端數(shù)據(jù)庫的協(xié)同研究[D]. 武漢：武漢理工大學(xué)，2013.

[2] 張永瑞.基于HTML5的Web離線技術(shù)在技能訓(xùn)練導(dǎo)學(xué)平臺中的應(yīng)用[J].長江大學(xué)學(xué)報：自然版，2013（10）.

[3] 王康.基于HTML5的3DsMax課程教學(xué)資源交流平臺的設(shè)計與開發(fā)[D].廣州：中山大學(xué)，2014.

[4] 陳澤鵬.基于HTML5技術(shù)的移動數(shù)字校園的研究與應(yīng)用[D].長沙：湖南大學(xué)，2014.

[5] 龍馬工作室.網(wǎng)頁設(shè)計與制作實戰(zhàn)從入門到精通[M].北京：人民郵電出版，2015.