HTML5におけるWeb SQLの学習まとめ

この記事の内容は、誰もが Web SQL の関連知識を理解できるように、HTML5 の Web SQL 学習の概要を紹介することです。困っている友人は参考にしていただければ幸いです。

Web システムやアプリケーションでは、一部のデータをローカルに保存する必要があることがよくあります。クライアントにデータを保存する最も初期の方法は cookie でした (もちろん、Cookie は主にデータを保存するために使用されます)。空いた時間にローカル データを保存する作業を行うことができます。実際には、いくつかの理由があります。サーバーがリクエストされるたびに Cookie がサーバーに送信されるため、不要なトラフィックの消費が増加します。 2. Cookie データを保存するためのルールは使いにくく、構造が十分に明確ではありません。

3. 最も重要な点は、Cookie の保存容量が非常に小さいということです。各 Cookie の長さは、最初に保存された Cookie データを超える場合は切り捨てられます。明らかに足りない。

HTML5 の開発により、localStorage と sessionStorage が後に登場しました。

localStorage: 永続的なストレージ。ページまたは再度ページ 保存されたデータは、そのデータが配置されているサイトから取得できます (clearI またはremoveItem メソッドを使用して削除できます)。

sessionStorage: 一時ストレージ。ページを閉じると、保存されたデータは自動的に消去されます。

実際、独自のプロジェクトを作業または開発する場合、これら 2 つのオブジェクトが最もよく使用されますが、少なくとも現時点では、これら 2 つのオブジェクトは依然としてほとんどのプロジェクトのローカル ストレージのニーズを満たすことができます。ローカルに保存されたデータのクエリはまだ十分に明確ではありません。 ここで主に要約すると、

HTML5 の新しい API -->Web SQL ローカル データベース テクノロジ

、Web Sql データベース API は実際には HTML5 仕様のコンポーネントではなく、HTML5 仕様のコンポーネントです。独立した仕様であり、基本的に SQL 言語と一致する構文を使用して、ローカル データベースの追加、削除、変更、クエリを実行できるため、バックエンド開発の経験を持つ開発者は簡単に始めることができます (HTML5 はWeb SQL Database データベース。この仕様を指定する作業は停止しています)、それでも基本的にほとんどのブラウザーでサポートされています。次に、その使用法を紹介します。

WebSql データベースを作成します。

openDatabase(数据库名，数据库版本号，描述，数据库大小，数据库创建成功的回调);
var mydb = openDatabase('myTeatDatabase',1,'this a Web Sql Database',1024*1024,function(){
     //数据库创建成功的回调，可省略
});

注: このメソッドは、データベースが作成されたときにデータベース アクセス オブジェクトを返します。すでに存在する場合、このメソッドはデータベースを直接開きます。

トランザクションの作成:

mydb.transaction(function(tx){
　　　　//该方法有一个事务对象参数供使用，该对象上有一系列为数据库增删改查的方法。
});

操作の実行:

tx.executeSql(执行数据库操作的sql语句，参数，数据库操作执行成功的回调，数据库操作执行失败的回调);

特定のデータベース操作:

データ テーブルの作成:

tx.executeSql('create table if not exists table1 (id unique,name)', [], function(tx, result) { 
	//成功回调
	}，function(error){
         //失败回调
	});

注: このステートメントの意味データテーブル table1 を作成することです。このテーブルがデータベースに存在しない場合、ステートメントに「存在しない場合」を追加しないと、作成したいデータテーブルが既にデータベースに存在する場合にエラーが報告されます。

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

tx.exexcteSql('drop table table1',[],function(tx,result){
      //删除成功时的回调
      }，function(error){ 
         //删除失败时的回调
      });

データをデータ テーブルに追加します:

tx.executeSql('insert into table1 (id,name) values (1,'小明')',[],function(tx,result){
            //添加数据成功时的回调
            }，function(error){
                  //添加数据失败时的回调
            });

データ テーブル内の 1 つ以上のデータを削除します:

tx.executeSql('delete from table1 where id=1',[],function(tx,result){
//删除成功时的回调
}，function(error){
    //删除失败时的回调
});

または:

tx.executeSql('delete from table1 where id=？',[1],function(tx,result){
//删除成功时的回调
}，function(error){
    //删除失败时的回调
});

データベース テーブル内の 1 つのデータを更新します:

tx.executeSql('updata table1 set name="小红" where id=1',[],function(tx,result){
   //数据更新成功时的回调
   }，function(error){
       //数据更新失败时的回调
   });

クエリ条件を満たすデータをクエリします:

tx.executeSql('select * from table',[],function(tx,result){
//查询成功时的回调
}，function(error){
  //查询失败时的回调
});

注: クエリが成功すると、クエリによって返されたデータを次の方法で使用できます。コールバック関数の結果パラメータの rows 属性。 この例は最も単純なクエリ ステートメントにすぎません。より複雑なクエリが必要な場合は、SQL ステートメントを参照してください。

要約:

簡単に要約すると、実際、このデータベース API はすべての追加、削除、変更、クエリが比較的単純です。現在、API はデータベース全体の削除をサポートしていませんが、データベース内のすべてのデータ テーブルを削除することでデータベースをクリアすることで、同様の効果を得ることができます。

以上がHTML5におけるWeb SQLの学習まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。