這篇文章主要介紹HTML5中Web Sql的操作方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為陽信等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及陽信網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站設計、網(wǎng)站制作、陽信網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

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

2、cookie的數(shù)據(jù)存儲數(shù)據(jù)的規(guī)則，并不那么好用，結構也不夠清晰。

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

隨著HTML5的發(fā)展，后來又出現(xiàn)了localStorage與sessionStorage：

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

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

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

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

創(chuàng)建一個WebSql數(shù)據(jù)庫：

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

注：該方法返回一個數(shù)據(jù)庫訪問對象，當創(chuàng)建的數(shù)據(jù)庫已經(jīng)存在的時候，該 方法直接打開這個數(shù)據(jù)庫。

創(chuàng)建一個事務：

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

執(zhí)行一段操作：

tx.executeSql(執(zhí)行數(shù)據(jù)庫操作的sql語句，參數(shù)，數(shù)據(jù)庫操作執(zhí)行成功的回調(diào)，數(shù)據(jù)庫操作執(zhí)行失敗的回調(diào));

具體的數(shù)據(jù)庫操作：

創(chuàng)建一個數(shù)據(jù)表：

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

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

刪除一個數(shù)據(jù)表：

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

在數(shù)據(jù)表中添加一條數(shù)據(jù)：

tx.executeSql('insert into table1 (id,name) values (1,'小明')',[],function(tx,result){
            //添加數(shù)據(jù)成功時的回調(diào)
            }，function(error){
                  //添加數(shù)據(jù)失敗時的回調(diào)
            });

刪除數(shù)據(jù)表中的一條或多條數(shù)據(jù)：

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

或：

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

更新數(shù)據(jù)庫表里面的一條數(shù)據(jù)：　　　　　

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

查詢滿足查詢條件的數(shù)據(jù)：　　　

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

注：查詢成功的時候可以通過回調(diào)函數(shù)中的result參數(shù)的rows屬性使用查詢返回的數(shù)據(jù)。

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

以上是“HTML5中Web Sql的操作方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！