HTML5 Web SQLデータベース

HTML5 Web SQL Database

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

Web バックエンドプログラマーであれば、SQL 操作を簡単に理解できるはずです。

データベース操作の詳細については、SQL チュートリアルを参照することもできます。

Web SQL データベースは、Safari、Chrome、Opera ブラウザの最新バージョンで動作します。

コアメソッド

仕様で定義されている 3 つのコアメソッドは次のとおりです。

openDatabase: このメソッドは既存のメソッドを使用します。新しいデータベースまたは新しいデータベースにデータベースオブジェクトを作成します。

transaction: このメソッドを使用すると、トランザクションを制御し、この状況に基づいてコミットまたはロールバックを実行できます。

executeSql: このメソッドは、実際の SQL クエリを実行するために使用されます。

データベースを開きます

データベースがすでに存在する場合は、openDatabase メソッドがデータベースを開きます。存在しない場合は、このメソッドがデータベースを作成します。

次のコードを使用してデータベースを作成して開きます:

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

上記のメソッドは次の 5 つを受け入れます。パラメータ:

データベース名

バージョン番号

説明テキスト

データベースサイズ

作成コールバック

最後と5番目のパラメータである作成コールバックは、データベースの作成後に呼び出されます。ただし、この機能がなくても、ランタイムはデータベースと正しいバージョンを作成します。

クエリを実行

クエリを実行するには、database.transaction() 関数を使用する必要があります。この関数には 1 つのパラメータが必要です。これは、以下に示すように、クエリを実際に実行する関数です。

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 というテーブルを作成します。

挿入操作

テーブルにエントリを作成するには、次のように簡単な 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);
});

最後の例

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>web SQL</title> 
      <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, "")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "m.sbmmt.com")');
            msg = '<p>数据表已创建，且插入了两条数据。</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>查询记录条数: " + 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">状态信息</div>
   </body>
</html>

レコードの削除

レコードの削除に使用される形式は次のとおりです。 :

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=\'www.w3cschool.cc\' WHERE id=2');
});

指定されたデータ ID を動的に更新することもできます:

db.transaction(function(tx) {    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);});

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>web SQL</title> <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, "php中文网")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "m.sbmmt.com")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (3, "www.ask.php.cn")'); msg = '<p>数据表已创建，且插入了两条数据。</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>查询记录条数: " + 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">状态信息</div> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear