ホームページ > ウェブフロントエンド > フロントエンドQ&A > html5はどのようなデータベースを使用しますか?

html5はどのようなデータベースを使用しますか?

青灯夜游
リリース: 2021-05-03 09:05:18
オリジナル
3114 人が閲覧しました

HTML5 は、データを一時的に保存するために使用できる Web SQL データベースを使用します。 Web SQL Database API は実際には HTML5 仕様の一部ではなく、別の仕様であり、一連の API を使用してクライアントのデータベースを操作します。 Chrome や Firefox などの主流ブラウザは、Web SQL データベースをサポートしています。

html5はどのようなデータベースを使用しますか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 は Web SQL データベースを使用します。

html 5 ローカル データベース (Web SQL データベース)

Web SQL データベース 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", "学生表", 1024 * 1024, function () { });if (!dataBase) {
alert("数据库创建失败!");
} else {
alert("数据库创建成功!");
}
ログイン後にコピー

既存のデータベースを開くための openDatabase メソッドについて説明します。データベースが存在しない場合は、データベースを作成することもできます。いくつかのパラメータの意味は次のとおりです:
1、データベース名。
2. 現在のバージョン番号は 1.0 です。そのままにして、死ぬまで書き続けてください。 ##3、データベースの説明。 ###4、データサイズを設定します。 ###5、コールバック関数(省略可能)。
初回呼び出し時にデータベースを作成し、接続を確立します。
作成されたデータベースはローカルに存在し、パスは次のとおりです:
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_*。
作成されるのは sqllite データベースで、SQLiteSpy を使用してファイルを開いて中のデータを確認できます。 SQLiteSpy は環境に優しいソフトウェアで、Baidu または SQLiteSpy の公式ダウンロード アドレス 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);
} );
});
}
ログイン後にコピー
Special注意

上記のコードで正常に実行されたコールバック関数にはパラメータ結果があります。

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

SQLResultSet は次のように定義されます。

interface SQLResultSet {readonly attribute long insertId;readonly attribute long rowsAffected;readonly attribute SQLResultSetRowList rows;
};
ログイン後にコピー

最も重要な属性である SQLResultSetRowList タイプの行は、データ セットの「行」です。
rows には、length と item という 2 つの属性があります。 したがって、クエリ結果の最初の行で name という名前の値を取得します: result.rows.item(0).name。


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');
});
}
ログイン後にコピー
プログラミング関連の知識の詳細については、次を参照してください。

プログラミングビデオ

! !

以上がhtml5はどのようなデータベースを使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート