検索

この記事の内容は、誰もが 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 サイトの他の関連記事を参照してください。

声明
この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
H5コードの例:実用的なアプリケーションとチュートリアルH5コードの例:実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続:類似性と相違点H5とHTML5の接続:類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素:キー要素とその目的H5コードの構成要素:キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5:一般的な使用法の理解HTML5およびH5:一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5:現代のウェブのビルディングブロック(H5)HTML5:現代のウェブのビルディングブロック(H5)Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード:クリーンで効率的なHTML5の書き込みH5コード:クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5:ウェブ上のユーザーエクスペリエンスをどのように強化するかH5:ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解:タグ、要素、属性H5コードの分解:タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)