在web系統或應用中，經常需要在本地存儲一些數據，最早的在客戶端存儲數據用的是cookie(當然cookie主要還是用來保存用戶的狀態，業余可以干點保存本地數據的活)，事實它并不適合用于保存客戶端的本地數據，有以下幾個原因：

1、每次請求服務器的時候都會增加不必要的流量消耗，因為每次請求服務器是都會講cookie發送至服務器。

2、cookie的數據存儲數據的規則，并不那么好用，結構也不夠清晰。

3、最重要的一點是cookie的存儲容量極小，每個cookie的長度不能超過4kb，超過時最早存儲cookie的數據會被截掉超出的大小，顯然是不太夠用的。

隨著HTML5的發展，后來又出現了localStorage與sessionStorage：

localStorage：永久存儲，無論多久再次進入頁面或者頁面所在站點（可以使用clearI或removeItem方法刪除），都能獲取到存儲的數據。

sessionStorage：臨時存儲，當關閉頁面的時候會自動清除保存的數據。

事實上在平時工作或開發自己項目的時候，這兩個用的是最多，至少目前這兩個對象還是可以滿足大部分項目本地存儲的需求，雖然儲存結構依然不夠清晰，查詢本地存儲的數據上依然過于簡單。

現在主要是總結一下，HTML5中新增的API-- Web Sql本地數據庫技術，Web Sql數據庫API實際上不是HTML5規范的組成部分，它是一個獨立的規范，它可以使用與sql語言基本一致的語法做到本地數據庫的增刪改查，所以有后端開發經驗的開發者很容易上手（需要指出的是，HTML5已經放棄了Web Sql Database數據庫，該規范的指定工作已經停止），即便如此，基本上已經得到了大多數瀏覽器的支持。現在我們來介紹一下它的使用：

創建一個WebSql數據庫：

openDatabase(數據庫名，數據庫版本號，描述，數據庫大小，數據庫創建成功的回調);var mydb = openDatabase( myTeatDatabase ,1, this a Web Sql Database ,1024*1024,function(){ //數據庫創建成功的回調，可省略});

注：該方法返回一個數據庫訪問對象，當創建的數據庫已經存在的時候，該 方法直接打開這個數據庫。

創建一個事務：

mydb.transaction(function(tx){ //該方法有一個事務對象參數供使用，該對象上有一系列為數據庫增刪改查的方法。});

執行一段操作：

tx.executeSql(執行數據庫操作的sql語句，參數，數據庫操作執行成功的回調，數據庫操作執行失敗的回調);

具體的數據庫操作：

創建一個數據表：

tx.executeSql( create table if not exists table1 (id unique,name) , [], function(tx, result) {  //成功回調 }，function(error){ //失敗回調 });

注：這條語句的意思是創建一個數據表table1，當數據庫中不存在這張表的時候，如果語句中不加上 if not exists 的話，當想要創建的數據表在數據庫中已經存在的時候會報錯。

刪除一個數據表：

tx.exexcteSql( drop table table1 ,[],function(tx,result){ //刪除成功時的回調 }，function(error){  //刪除失敗時的回調 });

在數據表中添加一條數據：

tx.executeSql( insert into table1 (id,name) html' target='_blank'>values (1, 小明 ) ,[],function(tx,result){ //添加數據成功時的回調 }，function(error){ //添加數據失敗時的回調 });

刪除數據表中的一條或多條數據：

tx.executeSql( delete from table1 where id=1 ,[],function(tx,result){//刪除成功時的回調}，function(error){ //刪除失敗時的回調});

或：

tx.executeSql( delete from table1 where id=？ ,[1],function(tx,result){//刪除成功時的回調}，function(error){ //刪除失敗時的回調});

更新數據庫表里面的一條數據：

tx.executeSql( updata table1 set name= 小紅 where id=1 ,[],function(tx,result){ //數據更新成功時的回調 }，function(error){ //數據更新失敗時的回調 });

查詢滿足查詢條件的數據：

tx.executeSql( select * from table ,[],function(tx,result){//查詢成功時的回調}，function(error){ //查詢失敗時的回調});

注：查詢成功的時候可以通過回調函數中的result參數的rows屬性使用查詢返回的數據。

這個例子只是最簡單的一種查詢語句，如果有更多復雜查詢的需求的話可以參考sql語句。

總結：

簡單的總結一下，其實這個數據庫API是比較簡單，所有的增刪改查都需要創建一個事務，在事務對象上執行所有操作，目前該API暫時不支持刪除整個數據庫，但是我們可以通過刪除那個數據庫里面的所有數據表來清空該數據庫，以達到類似效果。

以上就是HTML5中Web Sql的學習小結的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。