ホームページ > 記事 > ウェブフロントエンド > 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'); }); }