HTML5ローカルデータベースインスタンスの詳細説明-H5 チュートリアル-php.cn

HTML5ローカルデータベースインスタンスの詳細説明

Y2J

リリース： 2018-05-12 14:46:42

オリジナル

9107 人が閲覧しました

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(&#39;创建stu表成功&#39;); 
},         
function(tx, error){ alert(&#39;创建stu表失败:&#39; + 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, &#39;徐明祥&#39;],
        function () { alert(&#39;添加数据成功&#39;); },
        function (tx, error) { alert(&#39;添加数据失败: &#39; + error.message); 
        } );
    });

ログイン後にコピー

2) データをクエリします

コードは次のとおりです:

this.query = function () {
  dataBase.transaction(function (tx) {
            tx.executeSql(
        "select  *  from  stu", [],
         function (tx, result) {  //执行成功的回调函数
             //在这里对result 做你想要做的事情吧...........
            },
         function (tx, error) {
            alert(&#39;查询失败: &#39; + 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(&#39;更新失败: &#39; + 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(&#39;删除失败: &#39; + error.message);
        });
    });
}

ログイン後にコピー

5) データテーブルを削除します

コードは次のとおりです:

this.dropTable = function () {    
dataBase.transaction(function (tx) {            
tx.executeSql(&#39;drop  table  stu&#39;);     
});
}

ログイン後にコピー

[関連する推奨事項]

Html5 の無料ビデオチュートリアル

タイマーを作成するための H5 コードのデモ

複数の画像のアップロードを完了するための H5 の詳細な例

4. H5 のカスタム属性データ -*

H5 マイクロシーンの実装方法を説明します

以上がHTML5ローカルデータベースインスタンスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。