HTML5 チュートリアル HTML 5 ローカル データベース (Web SQL データベース)

HTML5 チュートリアル HTML 5 ローカル データベース (Web SQL データベース)

HTML5 の Web SQL データベース (HTML5 ローカル データベース) は、mysql クエリと同じクエリ ステートメントを使用してローカル データベースを操作できることがわかると、非常に魅力的になります。これは非常に興味深いと思いました。今日は、HTML 5 の Web SQL データベース API、openDatabase、transaction、executeSql について学びましょう。

Web SQL Database API は、実際には HTML5 仕様の一部ではなく、別の仕様です。一連の API を通じてクライアントのデータベースを操作します。 Safari、Chrome、Firefox、Opera などの主流ブラウザはすでに Web SQL Database をサポートしています。 HTML5 の Web SQL データベースは、確かに非常に魅力的です。mysql クエリと同じクエリ ステートメントを使用してローカル データベースを操作できることがわかると、非常に興味深いものになるでしょう。今日は、HTML 5 の Web SQL Database API について学びましょう。

以下では、データベースの作成と開き方、テーブルの作成、データの追加、データの更新、データの削除、テーブルの削除の方法を順番に紹介します。

最初に 3 つのコア メソッドを紹介します

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

2. トランザクション: このメソッドを使用すると、状況に応じてトランザクションの送信またはロールバックを制御できます。

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

ステップ 1: 接続を開いてデータベースを作成します

コードは次のとおりです:

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("数据库创建失败！");
} else {
alert("数据库创建成功！");
}

既存のデータベースを開くための openDatabase メソッドについて説明します。データベースが存在しない場合は、データベースを作成することもできます。いくつかのパラメータの意味は次のとおりです:
1、データベース名。
2. 現在のバージョン番号は 1.0 です。そのままにしておいてください。
3. データベースの説明。
4. データサイズを設定します。
5、コールバック関数（省略可能）。
初回通話時にデータベースを作成し、接続を確立します。
作成されたデータベースはローカルに存在し、パスは次のとおりです:
C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultdatabaseshttp_localhost_4987。
作成されるのはsqlliteデータベースで、SQLiteSpyでファイルを開いて中のデータを確認できます。 SQLiteSpy は環境に優しいソフトウェアです。Baidu または SQLiteSpy の公式ダウンロード アドレスからダウンロードできます。


ステップ 2: データテーブルを作成します

コードは次のとおりです:

this.createTable=function() {
dataBase.transaction( function(tx) { 
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)", 
[], 
function(tx,result){ alert('创建stu表成功'); }, 
function(tx, error){ alert('创建stu表失败:' + error.message); 
});
});
}

説明、
executeSql 関数には 4 つのパラメーターがあり、その意味は次のとおりです:
1) クエリ文字列、使用される SQL を表します。言語はSQLite 3.6.19です。
2) クエリ内の疑問符のある場所に文字列データを挿入します。
3) 成功時に実行されるコールバック関数。 tx と実行結果の 2 つのパラメータを返します。
4) 障害発生時に実行されるコールバック関数。 tx と失敗エラー メッセージの 2 つのパラメータを返します。



ステップ 3: 追加、削除、変更、クエリを実行します

1) データを追加します:

コードは次のとおりです:

this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加数据成功'); },
function (tx, error) { alert('添加数据失败: ' + error.message); 
} );
});

2) データをクエリします

コード

this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //执行成功的回调函数
//在这里对result 做你想要做的事情吧...........
},
function (tx, error) {
alert('查询失败: ' + error.message);
} );
});
}

説明します
上記のコードで正常に実行されるコールバック関数には、パラメーターの結果が含まれます。

結果: クエリされたデータセット。そのデータ型は、C# の DataTable と同様に SQLResultSet です。
SQLResultSet は次のように定義されます:

コードは次のとおりです:

interface SQLResultSet {
readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList rows;
};

最も重要な属性 — SQLResultSetRowList 型の行はデータ セットの「行」です。
rows には、length と item という 2 つの属性があります。
それでは、クエリ結果の特定の行と列の値を取得します: result.rows[i].item[fieldname]。

3) データを更新します

コードは次のとおりです:

this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('更新失败: ' + error.message);
});
});
}

4) データを削除します

コードは次のとおりです:

this.del = function (id) {
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('删除失败: ' + error.message);
});
});
}

5) データテーブルを削除します

コードは次のとおりです:

this.dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}