HTML5 Web SQL
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つです。対応する openDatabase() メソッド パラメータの説明:
データベース名
バージョン番号
説明テキスト
データベースサイズ
コールバックの作成
5 番目のパラメータ、コールバックは次のようになります。データベースの作成後に created が呼び出されます。
クエリ操作を実行する
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)');
});上記のステートメントが実行されると、LOGS という名前のテーブルが '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, "php中文网")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});動的値を使用してデータを挿入することもできます:
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 will 配列パラメータの各エントリを「?」にマップします。
データを読み取る
次の例は、データベースにすでに存在するデータを読み取る方法を示しています:
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, "php中文网")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.php.cn")');
});
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>
<meta charset="UTF-8">
<title>php中文网(php.cn)</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, "www.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>インスタンスを実行する»
「インスタンスを実行」ボタンをクリックしますオンラインの例を見る
レコードの削除
レコードの削除に使用される形式は次のとおりです:
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>php中文网(php.cn)</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, "www.php.cn")');
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=\'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>インスタンスの実行»
「インスタンスの実行」ボタンをクリックして、オンラインインスタンス
