首頁 > web前端 > H5教程 > HTML5中Web Sql的學習小結

HTML5中Web Sql的學習小結

青灯夜游
發布: 2018-11-13 09:35:23
轉載
3292 人瀏覽過

這篇文章帶給大家的內容是介紹HTML5的Web Sql學習小結,讓大家了解一些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資料庫,規範的指定工作已經停止),即便如此,基本上已經得到了大多數瀏覽器的支援。現在我們來介紹一下它的使用:

建立一個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語句。 總結:

###  簡單的總結一下,其實這個資料庫API是比較簡單,所有的增刪改查都需要建立一個事務,在交易物件上執行所有操作,目前該API暫時不支援刪除整個資料庫,但我們可以透過刪除該資料庫裡面的所有資料表來清空該資料庫,以達到類似效果。 ###

以上是HTML5中Web Sql的學習小結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板