HTML5 チュートリアル html 5 ローカル データベース (Web SQL データベース)_html5 チュートリアルのスキル

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

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

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

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

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

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

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

コードをコピー

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

var dataBase = openDatabase("student", "1.0", "Student Table", 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 ダウンロード アドレス: SQLiteSpy からダウンロードできます。


ステップ 2: データテーブルの作成

コードをコピー

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

this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"そうでない場合はテーブルを作成しますstu が存在します (id REAL UNIQUE、name TEXT)",
[],
function(tx,result){alert('Stu テーブルが正常に作成されました'); },
function(tx, error){ alert( 'stu テーブルの作成に失敗しました:' error.message);
});
});
}

Explain、
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(
"stu (id, name) 値に挿入 (?, ?)",
[id, 'Xu Mingxiang'],
function () { アラート('データは正常に追加されました' ); },
function (tx, error) {alert('データの追加に失敗しました: ' error.message) );
});

2) データのクエリ

コードのコピー コードは次のとおりです。

this .query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { / /実行が成功した場合のコールバック関数
//ここで結果に対して実行したいことを行います....
},
function (tx, error) {
alert('クエリが失敗しました: ' error.message);
} );
});
}



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

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

コードをコピー

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

インターフェイス SQLResultSet {
読み取り専用属性 long insertId;
読み取り専用属性 long rowsAffected;
読み取り専用属性 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) {
alter('更新に失敗しました: ' error.message );
});
});
}

4) データの削除

コードをコピーします

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

this.del = function (id) {
dataBase.transaction(function (tx) ) {
tx .executeSql(
"id= ? の stu から削除",
[id],
function (tx, result) {
},
function (tx) , error) {
alter('削除に失敗しました: ' error.message);
});
});
}

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

コードをコピー

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

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

Web SQL データベースが追加されました。デモを削除して変更します。クリックしてダウンロード。