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

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

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

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

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

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

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

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

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

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

ホットトピック









