瞿蘇

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

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

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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本地存儲(chǔ)簡(jiǎn)介

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

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

本地存儲(chǔ)的方法為：Web Storage（又分為L(zhǎng)ocalStorage 和Session Storage）、Web SQL等。不同的場(chǎng)合使用不同種類的本地存儲(chǔ)方法。下面將分別介紹這幾種本地存儲(chǔ)機(jī)制。

2 Web Storage簡(jiǎn)介

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

2.1 session Storage對(duì)象

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

2.2 local Storage對(duì)象

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

1）清空l(shuí)ocal Storage數(shù)據(jù)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 小結(jié)

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

參考文獻(xiàn)：

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

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

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

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

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