HTML5-Web SQLデータベース

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

私はあなたが素晴らしいWeb開発者であると仮定しています。もしそうなら、間違いなくSQLとRDBMSの概念をよく知っているでしょう。それでもSQLとのセッションが必要な場合は、リンク：/sql/index [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は配列引数の各項目を「？」にマップします。

読み取り操作

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

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>

これは、次の結果を生成します-

Html5-web-sql

目次