English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML5 グラフィック

HTML 5 ローカルデータベース

HTML5のWeb SQL Database（html5 ローカルデータベース（のWeb SQL Database API:openDatabase、transaction、executeSql）は非常に魅力的です。MySQLのクエリ文と同じようにローカルデータベースを操作できると発見すると、非常に面白いと感じるでしょう。今日は、HTMLについて一緒に学びましょう。 5のWeb SQL Database API：openDatabase、transaction、executeSql。

HTML5 Web SQLデータベース

WebSQLはフロントエンドの独立したモジュールで、Webストレージの方法の一つです。デバッグ中によく見かけますが、一般的にはあまり使用されません。

もしあなたがWebバックエンドプログラマーなら、SQLの操作は簡単に理解できるでしょう。

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

核心メソッド

以下は規格で定義された3つの核心メソッドです：

  • openDatabase：このメソッドは、既存のデータベースまたは新しいデータベースを使用してデータベースオブジェクトを作成します。

  • transaction：このメソッドは、トランザクションを制御し、その状況に基づいてコミットまたはロールバックを実行できるようにします。

  • executeSql：このメソッドは実際のSQLクエリを実行するために使用されます。

データベースを開く

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

var　db　=　openDatabase('testdb',　'1.0',　'テスト　WebDB',　2　*　1024　*　1024);

openDatabase()メソッドの5つの引数の説明：

  • データベースの名前

  • バージョン番号

  • 説明テキスト

  • データベースのサイズ

  • コールバックの作成

第5引数は、データベースが作成された後に呼び出されるコールバックを作成します。

クエリ操作を実行

操作を実行するにはdatabase.transaction()関数を使用します：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程網(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　db　=　openDatabase('testdb',　'1.0',　'テスト　WebDB',　2　*　1024　*　1024);
db.transaction(function　(tx)　{　　
　　　tx.executeSql('CREATE　TABLE　IF　NOT　EXISTS　LOGS　(id　unique,　log)');
});
</script>
</body>
</html>

上記の文を実行すると、& #39;testdb' データベースにLOGSという名前のテーブルを作成します。

データを挿入

上記の作成テーブル文を実行した後、データを挿入できます：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程網(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　db　=　openDatabase('testdb',　'1.0',　'テスト　WebDB',　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,　"ja.oldtoolbag.com")');
});
</script>
</body>
</html>

データを挿入するために動的値を使用することもできます：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程網(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　db　=　openDatabase('testdb',　'1.0',　'テスト　WebDB',　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]);
});
</script>
</body>
</html>

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

データの読み取り

以下の例では、データベースにすでに存在するデータを読み取る方法を示します：

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程網(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　db　=　openDatabase('testdb',　'1.0',　'テスト　WebDB',　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,　"ja.oldtoolbag.com")');
});
　
db.transaction(function　(tx)　{
　　　tx.executeSql('SELECT　*　FROM　LOGS39, [], function (tx, results) {
　　　　　　var len = results.rows.length, i
　　　　　　msg = "<p>検索記録件数: "　+　len　+　"</p>"
　　　　　　document.querySelector('#status#39;).innerHTML　+= msg;
　　　　
　　　　　　for (i = 0; i < len; i++{
　　　　　　　　　alert(results.rows.item(i).log　);
　　　　　　}
　　　　
　　　}, null);
});
</script>
</body>
</html>

完全なサンプル

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程網(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　db　=　openDatabase('testdb',　'1.0',　'テスト　WebDB',　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,　"ja.oldtoolbag.com")');
　　　　msg　=　'<p>データベースが作成され、2件のデータが挿入されました。</p>';
　　　　document.querySelector('#status#39;).innerHTML　=　　msg;
});
　
db.transaction(function　(tx)　{
tx.executeSql('SELECT　*　FROM　LOGS39, [], function (tx, results) {
　　　　var len = results.rows.length, i
　　　　msg = "<p>検索記録件数: "　+　len　+　"</p>"
　　　　document.querySelector('#status#39;).innerHTML　+= msg;
　
　　　　for (i = 0; i < len; i++{
　　　　　　　　msg = "<p><b>"　+　results.rows.item(i).log　+　"</b></p>"
　　　　　　　　document.querySelector('#status#39;).innerHTML　+= msg;
　　　　}
}, null);
});
</script>
<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=\'ja.oldtoolbag.com\'WHERE　id=2');
});

指定されたデータidを更新することもできます：

db.transaction(function(tx)　{
　　　　tx.executeSql('UPDATE　LOGS　SET　log=\'ja.oldtoolbag.com\'WHERE　id=?'，[id]);
});

完全なサンプル

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本教程網(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　db　=　openDatabase('testdb',　'1.0',　'テスト　WebDB',　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,　"ja.oldtoolbag.com")');
　　　　msg　=　'<p>データベースが作成され、2件のデータが挿入されました。</p>';
　　　　document.querySelector('#status#39;).innerHTML　=　　msg;
　});
　
　db.transaction(function　(tx)　{
　　　　　　tx.executeSql('DELETE　FROM　LOGS　WHERE　id=1');
　　　　　　msg　=　'<p>削除　id　为　1　の記録。</p>';
　　　　　　document.querySelector('#status#39;).innerHTML　=　　msg;
　});
　
　db.transaction(function　(tx)　{
　　　　　tx.executeSql('UPDATE　LOGS　SET　log=\'ja.oldtoolbag.com\'WHERE　id=2');
　　　　　　msg　=　'<p>更新　id　为　2　の記録。</p>';
　　　　　　document.querySelector('#status#39;).innerHTML　=　　msg;
　});
　
　db.transaction(function　(tx)　{
　　　　tx.executeSql('SELECT　*　FROM　LOGS39, [], function (tx, results) {
　　　　　　　var len = results.rows.length, i
　　　　　　　msg = "<p>検索記録件数: "　+　len　+　"</p>"
　　　　　　　document.querySelector('#status#39;).innerHTML　+= msg;
　　　　　　　
　　　　　　　for (i = 0; i < len; i++{
　　　　　　　　　　msg = "<p><b>"　+　results.rows.item(i).log　+　"</b></p>"
　　　　　　　　　　document.querySelector('#status#39;).innerHTML　+= msg;
　　　　　　　}
　　　　}, null);
　});
</script>
<div id="status" name="status">状態情報</div>
</body>
</html>
テストを見てみる ‹/›

以下の例の実行結果は次の図に示されています：

HTML5 アプリケーションキャッシュHTML5 クライアントストレージ