ホームページ > 記事 > ウェブフロントエンド > HTML5ローカルデータベースインスタンスの詳細説明
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) クエリの
string と 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); } ); }); }説明
コールバック上記のコードで正常に実行された関数には、パラメーターの結果が 1 つあります。
結果: クエリから取得された
データセット。そのデータ型は、C#のDataTableと同じようにSQLResultSetです。 SQLResultSet は次のように定義されます:
interface SQLResultSet { readonly attribute long insertId; readonly attribute long rowsAffected; readonly attribute SQLResultSetRow List 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'); }); }[関連する推奨事項]
以上がHTML5ローカルデータベースインスタンスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。