HTML5中Web Sql的操作方法

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

在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數據庫，該規范的指定工作已經停止），即便如此，基本上已經得到了大多數瀏覽器的支持?，F在我們來介紹一下它的使用：

創建一個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) 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語句。

以上是“HTML5中Web Sql的操作方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！