html5にはどのような保存方法があるのでしょうか？-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

html5にはどのような保存方法があるのでしょうか？

青灯夜游

Mar 15, 2022 pm 02:51 PM

html5ストレージタイプ

HTML5 ストレージタイプ: 1. データの長期保存に適したローカルストレージ「localstorage」、2. ブラウザを閉じると保存されたデータは自動的に削除されるローカルストレージ「sessionstorage」、3. オフラインキャッシュ「アプリケーション」キャッシュ」、アプリケーションに必要なファイルをローカルにキャッシュします。

html5にはどのような保存方法があるのでしょうか？

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

h5 より前は、Cookie は主にストレージに使用されていました。 Cookie の欠点は、リクエストヘッダーにデータが含まれ、サイズが 4K 以内であることです。メインドメインの汚染。

主なアプリケーション: ショッピングカート、顧客ログイン

IE ブラウザの場合、UserData があり、サイズは 64k で、IE ブラウザのみがサポートしています。

HTML5 は、クライアント側でデータを保存するための 2 つの新しい方法を提供します。

localStorage - 時間制限のないデータストレージ
sessionStorage - セッションのデータ Storage

1. ローカルストレージ localstorage

localStorage メソッドによって保存されるデータには時間制限がありません。データは翌日、翌週、または翌日以降も利用できます。

localStorage: データの長期保存に適しており、ブラウザを閉じてもデータは失われません;

ストレージ方法:

キーと値のペア (Key-Value) を使用すると、永続的に保存され、手動で削除しない限り有効期限が切れることはありません。

サイズ: ドメイン名ごとに

#サポート:

注: IE9 localStorage はローカルファイルをサポートしていません。サポートするには、プロジェクトをサーバーにデプロイする必要があります。

検出方法:

if(window.localStorage){
 alert(&#39;This browser supports localStorage&#39;);
}else{
 alert(&#39;This browser does NOT support localStorage&#39;);
}

よく使われるAPI:

getItem //レコードの取得
#setIten//レコードを設定
##key//取得キーに対応する値
clear//レコードに保存されているコンテンツをクリアします

## :

配列、画像、JSON、スタイル、スクリプト。。。 (内容を文字列にシリアル化できれば保存可能) 2.ローカルストレージsessionstorage

HTML5のローカルストレージAPIにおけるlocalStorageとsessionStorageは同じものです。違いは、sessionStorage はページを閉じた後にクリアされるのに対し、localStorage は常に保存されることです。

3. オフラインキャッシュ (アプリケーションキャッシュ)

HTML5 では、Web をキャッシュしてネットワークがない場合でも利用できるアプリケーションキャッシュが導入されており、キャッシュマニフェストファイルを作成してアプリケーションを作成します。キャッシュ。

アプリケーションに必要なローカルキャッシュファイル

使用方法:

①マニフェストファイルの設定ページ上:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

マニフェストファイル:

#マニフェストファイルは、何がキャッシュされるか (何がキャッシュされないのか) をブラウザーに伝える単純なテキストファイルです。

マニフェストファイルは 3 つのセクションに分けることができます:

①

キャッシュマニフェスト

- この見出しの下にリストされているファイルは、最初のダウンロード後にキャッシュされます

②

NETWORK - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません

③

FALLBACK - この見出しの下にリストされているファイルページにアクセスできません (404 ページなど)

完全なデモ:

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js
 
NETWORK:
login.jsp
 
FALLBACK:
/html/ /offline.html

サーバー上: マニフェストファイルを構成する必要があります正しい MIME タイプ、「text/cache-manifest」。

例: Tomcat:

<mime-mapping>
     <extension>manifest</extension>
     <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

一般的に使用される API:

コアは applicationCache オブジェクトであり、このオブジェクトには次のステータス属性があります。アプリケーションキャッシュの現在のステータス。 :

0 (UNCACHED) : キャッシュなし、つまりページに関連するアプリケーションキャッシュがない

1 (IDLE) : アイドル、つまり、アプリケーションキャッシュは更新されていません

2 (CHECKING): チェック中、つまり説明ファイルがダウンロードされ、更新をチェック中です

3 (DOWNLOADING): ダウンロード中、つまりアプリケーションキャッシュは、説明ファイルで指定されたリソースをダウンロードしています。

4 (UPDATEREADY): 更新が完了し、すべてのリソースがダウンロードされました。

5 (IDLE): 放棄されました。アプリケーションキャッシュ記述ファイルは存在しないため、ページはアプリケーションキャッシュにアクセスできなくなります

注:

1. ブラウザーには、キャッシュされたデータの容量制限が異なる場合があります (一部のブラウザーで設定されている制限は、サイトごとに 5MB です)
2 . マニフェストファイルまたは内部的にリストされているファイルの 1 つが正常にダウンロードできない場合、更新プロセス全体が失敗とみなされ、ブラウザは引き続き古いキャッシュを使用します (#3)。マニフェストを参照する HTML は、マニフェストと同じオリジンを持つ必要があります。マニフェストファイルと同じ場所にあることドメインの下にある
4. ブラウザは、マニフェストファイルを参照する HTML ファイルを自動的にキャッシュします。これは、HTML コンテンツが変更された場合、更新するにはバージョンを更新する必要があることを意味します。
5. マニフェストファイル内の CACHE は、NETWORK と FALLBACK の位置順序とは関係ありません。暗黙の宣言の場合は先頭にある必要があります。
6. FALLBACK 内のリソースは、マニフェストファイルと同じ生成元
7. 更新バージョンが完了したら、新しいバージョンを開始する前に一度更新する必要があり (ページは 1 回更新されます)、リスニングバージョンイベントを追加する必要があります。
8. サイト内の他のページにマニフェスト属性が設定されていない場合でも、要求されたリソースがキャッシュ内にあれば、キャッシュからアクセスされます
9. マニフェストファイルが変更されると、リソース要求自体が更新をトリガーします

オフラインキャッシュと従来のブラウザキャッシュの違い:

1. オフラインキャッシュはアプリケーション全体を対象とし、ブラウザキャッシュは単一のファイルです

2. オフラインキャッシュが壊れていますオンラインでもページを開くことはできますが、ブラウザーのキャッシュが機能していません

3. オフラインキャッシュにより、ブラウザーにリソースを更新するようアクティブに通知できます

関連する推奨事項:「

html ビデオチュートリアル」

以上がhtml5にはどのような保存方法があるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

React：現代のフロントエンド開発の基礎Apr 19, 2025 am 12:23 AM

Reactは、最新のフロントエンドアプリケーションを構築するためのJavaScriptライブラリです。 1.パフォーマンスを最適化するために、コンポーネントおよび仮想DOMを使用します。 2。コンポーネントJSXを使用して、データを管理するために定義、状態、および属性を定義します。 3.フックはライフサイクル管理を簡素化します。 4. Contextapiを使用して、グローバルステータスを管理します。 5.一般的なエラーには、デバッグステータスの更新とライフサイクルが必要です。 6。最適化手法には、メモ、コード分割、仮想スクロールが含まれます。

Reactの未来：Web開発におけるトレンドと革新Apr 19, 2025 am 12:22 AM

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

React：UIコンポーネントを構築するための強力なツールApr 19, 2025 am 12:22 AM

Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。その核となるアイデアは、コンポーネントを通じてUIを構築することです。 1.コンポーネントは、UIロジックとスタイルをカプセル化する反応の基本単位です。 2。仮想DOMと状態管理はコンポーネントの作業の鍵であり、状態はSetStateから更新されます。 3.ライフサイクルには、マウント、更新、アンインストールの3つのステージが含まれます。パフォーマンスは、合理的に使用して最適化できます。 4. UseStateとContextapiを使用して、状態を管理し、コンポーネントの再利用性とグローバルな州管理を改善します。 5.一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。これは、ReactDevtoolsを介してデバッグできます。 6.パフォーマンス最適化の提案には、メモの使用、不必要な再レンダリングの回避、および私たちの使用が含まれます

HTMLとのReactを使用：コンポーネントとデータのレンダリングApr 19, 2025 am 12:19 AM

HTMLを使用してReactでコンポーネントとデータをレンダリングすることは、次の手順を通じて達成できます。JSX構文の使用：JSX構文を使用してHTML構造をJavaScriptコードに埋め込み、コンパイル後にDOMを操作します。コンポーネントはHTMLと組み合わされます。Reactコンポーネントはプロップを介してデータを渡し、などのHTMLコンテンツを動的に生成します。データフロー管理：Reactのデータフローは、親コンポーネントから子コンポーネントに渡される一方通行であり、アプリコンポーネントが名前を挨拶に渡すなど、データフローが制御可能であることを保証します。基本的な使用例：マップ関数を使用してリストをレンダリングするには、フルーツリストのレンダリングなどのキー属性を追加する必要があります。高度な使用例：UseStateフックを使用して状態を管理し、ダイナミクスを実装する

Reactの目的：シングルページアプリケーションの構築（SPA）Apr 19, 2025 am 12:06 AM

Reactは、ユーザーインターフェイスを構築するための効率的で柔軟な方法を提供するため、シングルページアプリケーション（SPA）を構築するための好ましいツールです。 1）コンポーネント開発：複雑なUIを独立した再利用可能な部分に分割して、保守性と再利用性を向上させます。 2）仮想DOM：仮想DOMと実際のDOMの違いを比較することにより、レンダリングパフォーマンスを最適化します。 3）状態管理：状態および属性を介したデータフローを管理して、データの一貫性と予測可能性を確保します。

React：Web開発のためのJavaScriptライブラリの力Apr 18, 2025 am 12:25 AM

Reactは、メタがユーザーインターフェイスを構築するために開発したJavaScriptライブラリであり、そのコアはコンポーネント開発と仮想DOMテクノロジーです。 1。コンポーネントと状態管理：Reactは、コンポーネント（関数またはクラス）とフック（UseStateなど）を介して状態を管理し、コードの再利用性とメンテナンスを改善します。 2。仮想DOMとパフォーマンスの最適化：仮想DOMを介して、実際のDOMを効率的に更新してパフォーマンスを向上させます。 3.ライフサイクルとフック：フック（使用効果など）は、関数コンポーネントがライフサイクルを管理し、副作用操作を実行できるようにします。 4。使用例：基本的なHelloworldコンポーネントから高度なグローバル州管理（USECONTEXTおよび

Reactのエコシステム：ライブラリ、ツール、およびベストプラクティスApr 18, 2025 am 12:23 AM

Reactエコシステムには、状態管理ライブラリ（Reduxなど）、ルーティングライブラリ（Reactrouterなど）、UIコンポーネントライブラリ（材料-UIなど）、テストツール（JESTなど）、およびビルディングツール（Webpackなど）が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質と開発効率を向上させるのを支援するために協力します。

反応とフロントエンドの開発：包括的な概要Apr 18, 2025 am 12:23 AM

Reactは、ユーザーインターフェイスを構築するためにFacebookが開発したJavaScriptライブラリです。 1. UI開発の効率とパフォーマンスを改善するために、コンポーネントおよび仮想DOMテクノロジーを採用しています。 2。Reactのコア概念には、コンポーネント化、状態管理（UseStateやUseEffectなど）、および仮想DOMの作業原則が含まれます。 3。実際のアプリケーションでは、基本的なコンポーネントレンダリングから高度な非同期データ処理へのReactサポートがサポートされます。 4.主要な属性の追加や誤ったステータスの更新を忘れるなどの一般的なエラーは、ReactDevtoolsとログを介してデバッグできます。 5.パフォーマンスの最適化とベストプラクティスには、React.Memo、コードセグメンテーション、コードの読み取り可能な状態を維持し、信頼性を維持することが含まれます

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。