HTML5 Web SQL 數據庫

HTML5 應用程序緩存►◄HTML5 Web 存儲

Web sql 數據庫 API 并不是 html5 規范的一部分，它是一個獨立的規范，引入了一組使用 sql 操作客戶端數據庫的 APIs

Web sql 核心方法

下表列出了在 Web sql 規范中定義的三個核心方法

方法	描述
openDatabase	使用現有的數據庫或者新建的數據庫創建一個數據庫對象
transaction	讓我們能夠控制一個事務，以及基于這種情況執行提交或者回滾
executesql	用于執行實際的 sql 查詢

打開數據庫

方法 openDatabase() 用來打開一個數據庫

如果數據庫不存在，則會創建一個新的數據庫

使用方法

var db = openDatabase('ysdb','1.0','My first DB',2 * 1024 * 1024,function(){});

參數說明

參數	說明
'ysDB'	數據庫名稱
'1.0'	版本號
'My first DB '	描述文本
'2 * 1024 * 1024'	數據庫大小
func	創建回調，回調函數會在創建數據庫后被調用

執行查詢操作

方法 database.transaction() 用來執行一個事物查詢操作

var db = openDatabase('ysdb',2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,log)');
});

上面的范例執行后會在 'ysdb' 數據庫中創建一個名為 logs 的表

插入數據

創建了數據庫后，我們可以使用下面的語句插入一些數據

var db = openDatabase('ysdb',2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,log)');
   tx.executesql('INSERT INTO logs (id,log) VALUES (1,"簡單編程")');
   tx.executesql('INSERT INTO logs (id,log) VALUES (2,"www.F2er.com")');
});

我們也可以使用動態值來插入數據

var db = openDatabase('ysdb',2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,log)');
  tx.executesql('INSERT INTO logs (id,log) VALUES (?,?)',[e_id,e_log]);
});

范例中的 e_id 和 e_log 是外部變量，executesql 會映射數組參數中的每個條目給 "?"

讀取數據

我們可以使用下面的語句從讀取數據庫中已經存在的數據

var db = openDatabase('ysdb',2 * 1024 * 1024);
 
db.transaction(function (tx) {
   tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,"www.F2er.com")');
});
 
db.transaction(function (tx) {
   tx.executesql('SELECT * FROM logs',[],function (tx,results) {
      var len = results.rows.length,i;
      msg = "<p>查詢記錄條數: " + len + "</p>";
      document.querySelector('#status').innerhtml +=  msg;
 
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
 
   },null);
});

完整的范例

var db = openDatabase('ysdb',2 * 1024 * 1024);
var msg;
 
db.transaction(function (tx) {
    tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,log)');
    tx.executesql('INSERT INTO logs (id,"簡單編程")');
    tx.executesql('INSERT INTO logs (id,"www.F2er.com")');
    msg = '<p>數據表已創建，且插入了兩條數據</p>';
    document.querySelector('#status').innerHTML =  msg;
});
 
db.transaction(function (tx) {
tx.executesql('SELECT * FROM logs',results) {
    var len = results.rows.length,i;
    msg = "<p>查詢記錄條數: " + len + "</p>";
    document.querySelector('#status').innerHTML +=  msg;
 
    for (i = 0; i < len; i++){
        msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
        document.querySelector('#status').innerHTML +=  msg;
    }
},null);
});

刪除記錄

我們可以使用下面的語句來刪除記錄

db.transaction(function (tx) {
    tx.executesql('DELETE FROM logs  WHERE id=1');
});

刪除指定的數據 id 也可以是動態的

db.transaction(function(tx) {
    tx.executesql('DELETE FROM logs WHERE id=?',[id]);
});

更新記錄

我們可以使用下面的語句來更新記錄

db.transaction(function (tx) {
    tx.executesql('UPDATE logs SET log=\'F2er.com\' WHERE id=2');
});

更新指定的數據 id 也可以是動態的

db.transaction(function(tx) {
    tx.executesql('UPDATE logs SET log=\'F2er.com\' WHERE id=?',[id]);
});

完整范例

var db = openDatabase('ysdb',2 * 1024 * 1024);
var msg;
 
 db.transaction(function (tx) {
    tx.executesql('CREATE TABLE IF NOT EXISTS logs (id unique,"www.F2er.com")');
    msg = '<p>數據表已創建，且插入了兩條數據。</p>';
    document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
      tx.executesql('DELETE FROM logs  WHERE id=1');
      msg = '<p>刪除 id 為 1 的記錄。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
     tx.executesql('UPDATE logs SET log=\'F2er.com\' WHERE id=2');
      msg = '<p>更新 id 為 2 的記錄。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
    tx.executesql('SELECT * FROM logs',results) {
       var len = results.rows.length,i;
       msg = "<p>查詢記錄條數: " + len + "</p>";
       document.querySelector('#status').innerHTML +=  msg;
 
       for (i = 0; i < len; i++){
          msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
          document.querySelector('#status').innerHTML +=  msg;
       }
    },null);
 });