HTML5 Web SQLデータベース

HTML5 Web SQL データベース

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

あなたが Web バックエンドプログラマーであれば、SQL の操作を理解するのは簡単でしょう。さらにデータベース操作に関する詳細については、私たちの SQL チュートリアルを参照することもできます。

Web SQL データベースは最新の Safari、Chrome、および Opera ブラウザで動作します。

コアメソッド

以下は仕様で定義されている三つのコアメソッドです：

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

データベースを開く

openDatabase() メソッドを使用して既存のデータベースを開くか、データベースが存在しない場合は新しいデータベースを作成できます。以下のコードをご覧ください：


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

openDatabase() メソッドの五つのパラメータの説明：

パラメータ	説明
データベース名称	データベースの名前を指定します。
バージョン号	データベースのバージョンを指定します。
説明テキスト	データベースの説明を入力します。
データベースサイズ	データベースのサイズを指定します（バイト単位）。
作成コールバック	データベースが作成された後に呼び出されるコールバック関数。

クエリ操作を実行する

データベースで操作を実行するには、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 という名前のテーブルが作成されます。

データの挿入

前述のテーブル作成ステートメントを実行した後、いくつかのデータを挿入できます：


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, "IT教程")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.japanitguide.com")');
});

または動的な値を使用してデータを挿入することもできます：


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, "IT教程")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.japanitguide.com")');
});
db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
        var len = results.rows.length, i;
        msg = "クエリ結果のレコード数: " + len ;
        document.querySelector('#status').innerHTML += msg;
        for (i = 0; i < len; i++) {
            alert(results.rows.item(i).log);
        }
    }, null);
});

完全な例

以下は完全な例です：


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, "IT教程")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.japanitguide.com")');
    msg = 'テーブルが作成され、2 つのレコードが挿入されました。';
    document.querySelector('#status').innerHTML = msg;
});

db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
        var len = results.rows.length, i;
        msg = "クエリ結果のレコード数: " + len ;
        document.querySelector('#status').innerHTML += msg;
        for (i = 0; i < len; i++) {
            msg = "" + results.rows.item(i).log;
            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=\'www.w3cschool.cc\' WHERE id=2');
});

指定したデータの id も動的にすることができます：


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

完全な例 2

以下は別の完全な例です：


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, "IT教程")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.japanitguide.com")');
    msg = '

テーブルが作成され、2 つのレコードが挿入されました。

';
    document.querySelector('#status').innerHTML = msg;
});

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=1');
    msg = 'id が1 の記録を削除しました。';
    document.querySelector('#status').innerHTML = msg;
});

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
    msg = 'id が2 の記録を更新しました。';
    document.querySelector('#status').innerHTML = msg;
});

db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
        var len = results.rows.length, i;
        msg = "クエリ結果のレコード数: " + len ;
        document.querySelector('#status').innerHTML += msg;
        for (i = 0; i < len; i++) {
            msg = "" + results.rows.item(i).log ;
            document.querySelector('#status').innerHTML += msg;
        }
    }, null);
});