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

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

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

1、每次請(qǐng)求服務(wù)器的時(shí)候都會(huì)增加不必要的流量消耗，因?yàn)槊看握?qǐng)求服務(wù)器是都會(huì)講cookie發(fā)送至服務(wù)器。

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

3、最重要的一點(diǎn)是cookie的存儲(chǔ)容量極小，每個(gè)cookie的長(zhǎng)度不能超過(guò)4kb，超過(guò)時(shí)最早存儲(chǔ)cookie的數(shù)據(jù)會(huì)被截掉超出的大小，顯然是不太夠用的。

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

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

sessionStorage：臨時(shí)存儲(chǔ)，當(dāng)關(guān)閉頁(yè)面的時(shí)候會(huì)自動(dòng)清除保存的數(shù)據(jù)。

事實(shí)上在平時(shí)工作或開(kāi)發(fā)自己項(xiàng)目的時(shí)候，這兩個(gè)用的是最多，至少目前這兩個(gè)對(duì)象還是可以滿足大部分項(xiàng)目本地存儲(chǔ)的需求，雖然儲(chǔ)存結(jié)構(gòu)依然不夠清晰，查詢本地存儲(chǔ)的數(shù)據(jù)上依然過(guò)于簡(jiǎn)單。

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

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

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

注：該方法返回一個(gè)數(shù)據(jù)庫(kù)訪問(wèn)對(duì)象，當(dāng)創(chuàng)建的數(shù)據(jù)庫(kù)已經(jīng)存在的時(shí)候，該 方法直接打開(kāi)這個(gè)數(shù)據(jù)庫(kù)。

創(chuàng)建一個(gè)事務(wù)：

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

執(zhí)行一段操作：

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

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

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

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

注：這條語(yǔ)句的意思是創(chuàng)建一個(gè)數(shù)據(jù)表table1，當(dāng)數(shù)據(jù)庫(kù)中不存在這張表的時(shí)候，如果語(yǔ)句中不加上"if not exists"的話，當(dāng)想要?jiǎng)?chuàng)建的數(shù)據(jù)表在數(shù)據(jù)庫(kù)中已經(jīng)存在的時(shí)候會(huì)報(bào)錯(cuò)。

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

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

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

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

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

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

或：

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

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

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

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

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

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

這個(gè)例子只是最簡(jiǎn)單的一種查詢語(yǔ)句，如果有更多復(fù)雜查詢的需求的話可以參考sql語(yǔ)句。

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

新聞名稱：HTML5中WebSql的操作方法
標(biāo)題來(lái)源：http://chinadenli.net/article48/gisohp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、軟件開(kāi)發(fā)、域名注冊(cè)、電子商務(wù)、定制開(kāi)發(fā)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)