HTML5 は、データを一時的に保存するために使用できる Web SQL データベースを使用します。 Web SQL Database API は実際には HTML5 仕様の一部ではなく、別の仕様であり、一連の API を使用してクライアントのデータベースを操作します。 Chrome や Firefox などの主流ブラウザは、Web SQL データベースをサポートしています。
このチュートリアルの動作環境: 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 です。 (必須)
this.insert = function () { dataBase.transaction(function (tx) { tx.executeSql("insert into stu (id, name) values(?, ?)", [id, '徐明祥'], function () { alert('添加数据成功'); }, function (tx, error) { alert('添加数据失败: ' + error.message); } ); });
this.query = function () { dataBase.transaction(function (tx) { tx.executeSql("select * from stu", [], function (tx, result) { //执行成功的回调函数//在这里对result 做你想要做的事情吧...........}, function (tx, error) { alert('查询失败: ' + error.message); } ); }); }
SQLResultSet は次のように定義されます。
interface SQLResultSet {readonly attribute long insertId;readonly attribute long rowsAffected;readonly attribute SQLResultSetRowList rows; };
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); }); }); }
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); }); }); }
this.dropTable = function () { dataBase.transaction(function (tx) { tx.executeSql('drop table stu'); }); }
プログラミングビデオ
! !以上がhtml5はどのようなデータベースを使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。