HTML5のWeb SQLデータベース
ウェブSQLデータベースAPIは、HTML5仕様の一部ではありませんが、それは、独立した仕様であるSQL操作クライアントデータベースを使用するためのAPIのセットを導入しました。
あなたは、Webプログラマ後端している場合は、SQL操作を理解することが容易であるべきです。
また、私たちを参照することができますSQLのチュートリアルより多くの知識のデータベース操作を学習します。
ウェブSQLデータベースは、サファリ、ChromeとOperaブラウザの最新バージョンで動作することができます。
コアの方法
以下は、仕様で定義された3つのコアメソッドです：
- OpenDatabaseメソッド：このメソッドは、既存のデータベースを使用するか、または新しいデータベース・オブジェクト・データベースを作成します。
- トランザクション：このメソッドは、私たちは、トランザクションを制御することができ、この場合に基づいてコミットまたはロールバックします。
- ExecuteSQL：この方法は、実際のSQLクエリを実行するために使用されます。
データベースを開きます
データベースが存在しない場合、私たちは、次のコードを使用し、新しいデータベースを作成し、既存のデータベースを開くために、OpenDatabaseメソッド（）メソッドを使用することができます。
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
記述に対応する5つのパラメータのOpenDatabaseメソッド（）メソッド：
- データベースの名前
- バージョン番号
- 説明テキスト
- データベースのサイズ
- コールバックを作成します。
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」データベース内のテーブルという名前のログが作成されます。
データを挿入
テーブルを作成するために、上記のステートメントを実行した後、我々はいくつかのデータを挿入することができます。
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.w3big.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_logと外部変数、は、ExecuteSQL配列パラメータは、各エントリにマッピングされているE_ID「？。」
データを読みます
次の例では、データベースに既にデータを読み取る方法を示しています。
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.w3big.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);
});
完全な例
<!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, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.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">
<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, "www.w3big.com")');
msg = '<p>数据表已创建，且插入了两条数据。</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);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
上記の動作の結果の例を以下に示すとおり
