HTML5 Web SQL データベース
代替案： Web SQL の将来は不確実であり、広くサポートされていないため、トランザクションとキーバリューストアをサポートする最新のブラウザ API である IndexedDB への移行を推奨します。Web SQL の状態：Web SQL API は非推奨となり、使用は推奨されません。新しいブラウザ標準では、クライアント側ストレージとして IndexedDB を使用することが推奨されています。Web SQL は一部の古いブラウザでのみサポートされています。
Web SQL データベース 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);
openDatabase() メソッドに対応する 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 という名前のテーブルが作成されます。
データを挿入する
上記のテーブル作成ステートメントを実行した後、いくつかのデータを挿入できます：
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, "サンプル")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.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, "サンプル")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.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('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, "www.example.com")');
msg = '<p>データテーブルが作成され、2 つのデータが挿入されました。</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);
});
やってみる »
上記の例の実行結果は次の図のとおりです。
レコードを削除する
レコードを削除する形式は次のとおりです。
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]);
});
完全な例
例
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, "www.example.com")');
msg = '<p>データテーブルが作成され、2 つのデータが挿入されました。</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=\'www.w3cschool.cc\' WHERE id=2');
msg = '<p>id が 2 のレコードを更新しました。</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);
});
やってみる »
上記の例の実行結果は次の図のとおりです。
