HTML5-WebSQLデータベース

Web SQLデータベースAPIは、実際にはHTML5仕様の一部ではありませんが、SQLを使用してクライアント側データベースを操作するための一連のAPIを導入する別個の仕様です。

あなたは優れたWeb開発者であると思います。その場合は間違いなく、SQLとRDBMSの概念をよく知っているはずです。それでもSQLとのセッションが必要な場合は、SQLチュートリアルを実行できます。

Web SQL Databaseは、Safari、Chrome、Operaの最新バージョンで動作します。

コアメソッド

このチュートリアルで取り上げる仕様で定義されているコアメソッドは次の3つです-

openDatabase −このメソッドは、既存のデータベースを使用するか、新しいデータベースを作成して、データベースオブジェクトを作成します。
transaction −このメソッドを使用すると、トランザクションを制御し、状況に基づいてコミットまたはロールバックを実行できます。
executeSql −このメソッドは、実際のSQLクエリを実行するために使用されます。

データベースを開く

OpenDatabaseメソッドの方法は、それが存在しない場合、このメソッドは、それを作成し、それがすでに存在する場合は、データベースを開くの面倒を見ます。

データベースを作成して開くには、次のコードを使用します-

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

上記の方法は、次の5つのパラメータを取りました-

データベース名
バージョンナンバー
テキストの説明
データベースのサイズ
作成コールバック

最後と5番目の引数である作成コールバックは、データベースが作成されている場合に呼び出されます。ただし、この機能がなくても、データベースはオンザフライで作成され、正しくバージョン管理されます。

クエリの実行

クエリを実行するには、database.transaction（）関数を使用します。この関数には単一の引数が必要です。これは、次のように実際にクエリを実行する関数です。

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

上記のクエリは、「mydb」データベースにLOGSというテーブルを作成します。

INSERT操作

テーブルにエントリを作成するには、上記の例に次のように簡単なSQLクエリを追加します。

var db = openDatabase('mydb', '1.0', 'Test DB', 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, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

次のように入力を作成しながら動的な値を渡すことができます-

var db = openDatabase('mydb', '1.0', 'Test DB', 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は配列引数の各項目を「？」にマップします。

READ操作

既存のレコードを読み取るには、コールバックを使用して次のように結果をキャプチャします-

var db = openDatabase('mydb', '1.0', 'Test DB', 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, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

最終例

最後に、この例を次のように本格的なHTML5ドキュメントに保存し、Safariブラウザで実行してみましょう。

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 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, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + 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); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

これにより、次の結果が生成されます-