原標題：淺析 HTML5 數據存儲的方法及應用

1 HTML5 本地存儲簡介

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

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

本地存儲的方法為:Web Storage(又分為 LocalStorage 和 Ses?sion Storage)、WebSQL 等。不同的場合使用不同種類的本地存儲方法。下面將分別介紹這幾種本地存儲機制。

2Web Storage 簡介

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

2.1 session Storage對象

Session 即會話，是針對一個會話，sessionStorage 則是將數據保存在 session 對象中。用戶在瀏覽網站時，用戶從打開網站 到關閉網站所經過的整個時間，這段時間就是用戶瀏覽網站所 花費的時間。其中任何數據都保存在session 對象中，同時僅在 同一的會話頁面中，數據才能訪問，一旦會話結束，所有的數據 將銷毀。

2.2 local Storage 對象

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

1)清空 local Storage數據

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

2)遍歷 local Storage數據

遍歷local Storage 數據主要用到兩個方法length 和 key,length 表示中保存的數據總量，key表示保存數據時的鍵名項，

索引號(index)表示第幾條鍵名對應的數據記錄。索引號(in?dex)以0 值開始，如果取第3 條鍵名對應的數據，index值應該是 2。

“獲取數據并存儲”示例

“取出數據顯示”示例

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

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

綜上所述，SessionStorage是一種非持久化的本地存儲,它僅是會話級別的存儲。LocalStorage是持久化的本地存儲,只有主動刪除數據,數據才會過期，否則數據是永遠不會過期的。

3)使用JSON對象存取數據

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

3WebSQL 數據庫

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

但需要我們注意的是，在使用服務器端的一個數據庫時，需要關閉數據庫。

WebSQL的3個核心方法，分別為openDatabase、transac?tion、executeSql。

1)打開與創建數據庫

可以使用OpenDatabase方法打開一個已經存在的數據庫，如果數據庫不存在，使用此方法將會創建一個新數據庫。打開或創建一個數據庫的代碼如下。

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

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

2)執行事務

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

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

同時可以利用SQL語句為表插入一些新數據，也可以管理現有數據。

3)SQL操作結果處理方法

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

當SQL操作結果為成功時,執行的回調函數有兩個參數，分別是執行事務對象、查詢返回的結果。

當SQL操作結果為失敗時,執行的回調函數為一個,回調函 數中僅有一個參數,即錯誤對象，可以通過此錯誤對象獲知具體的錯誤信息。

總之，在HTML5中，大大豐富了客戶端本地可以存儲的內 容，添加了許多功能來將原本必須要保存在服務器上的數據轉換為保存在客戶端本地，從而大大提高了 WEB應用程序的性能，減輕了服務器端的負擔。

4小結

通過比較分析幾種存儲技術，我們了解了要實現設計系統的離線功能需要將遠程數據庫的數據復制到本地數據庫，并選取一種合適的本地存儲技術。

比如我的案例：www.xmqisheng.com

參考文獻：

[1]張慧.基于HTML5的本地數據庫與服務端數據庫的協同研究[D].武漢:武漢理工大學,2013.

[2]張永瑞.基于HTML5的Web離線技術在技能訓練導學平臺中的應用[J].長江大學學報：自然版,2013(10).

[3]王康.基于HTML5的3DsMax課程教學資源交流平臺的設計與開發[D].廣州:中山大學,2014.

[4]陳澤鵬.基于HTML5技術的移動數字校園的研究與應用[D].長沙:湖南大學,2014.

[5]龍馬工作室.網頁設計與制作實戰從入門到精通[M].北京：人民郵電出版,2015.

責任編輯：

總結

以上是生活随笔為你收集整理的HTML5的数据存储和数据处理的功能有,浅析 HTML5 数据存储的方法及应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。