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

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

May 03, 2021 am 09:05 AM
html5 データベース

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

MySQL:簡単な学習のためのシンプルな概念 MySQL:簡単な学習のためのシンプルな概念 Apr 10, 2025 am 09:29 AM

MySQLは、オープンソースのリレーショナルデータベース管理システムです。 1)データベースとテーブルの作成:createdatabaseおよびcreateTableコマンドを使用します。 2)基本操作:挿入、更新、削除、選択。 3)高度な操作:参加、サブクエリ、トランザクション処理。 4)デバッグスキル:構文、データ型、およびアクセス許可を確認します。 5)最適化の提案:インデックスを使用し、選択*を避け、トランザクションを使用します。

See all articles