HTML5 Web SQLデータベース

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

あなたが優れた Web 開発者であると仮定すると、SQL と RDBMS の概念を十分に理解していることは間違いありません。 SQL トピックがまだ必要な場合は、SQL チュートリアルを参照してください。

最新バージョンのSafari、Chrome、OperaでWeb SQLデータベースを使用できます。

コアメソッド

以下は、仕様で定義されている 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)');

});

上記のクエリステートメントは、LOGS テーブルと呼ばれるデータベースを作成します。

挿入操作

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

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('ログが存在しない場合はテーブルを作成 (id は固有、ログ)');
tx.executeSql('ログに挿入 (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)');

ここで e_id と e_log は外部変数であり、executeSql は配列パラメータの各エントリを "?" にマップします。

読み取り操作

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

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

db.transaction(function (tx) {

tx.executeSql('ログが存在しない場合はテーブルを作成します (id 固有、ログ)'); tx.executeSql('INSERT INTO ログ (id, log) VALUES (1, " foobar")');
tx.executeSql('ログ (id, log) 値に挿入 (2, "logmsg")');
});
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 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>

最新バージョンではSafari または Opera ブラウザーの場合、次の結果が生成されます:

ログメッセージが作成され、行が挿入されました。

見つかった行: 2
foobar

logmsg

レコードの削除

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

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"> <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, "www.php.cn")'); msg = '<p>数据表已创建，且插入了两条数据。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('DELETE FROM LOGS WHERE id=3'); msg = '<p>删除 id 为 3 的记录。</p>'; document.querySelector('#status').innerHTML = msg; }); db.transaction(function (tx) { tx.executeSql('UPDATE LOGS SET log=\'www.php.cn\' 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); }); </script> </head> <body> <div id="status" name="status">状态信息</div> </body> </html>

提出するリセットコード
自動運転