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

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

青灯夜游

リリース： 2022-03-15 14:52:17

オリジナル

4805 人が閲覧しました

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

関連イベント:

アプリケーションキャッシュのステータスの変更を示します:
checking: ブラウザがアプリケーションキャッシュの更新を探すときにトリガーされます
error: 更新をチェックするときまたはダウンロードするときにトリガーされますリソース中にエラーが送信されるときにトリガーされます
noupdate: チェックするときにトリガーされます説明ファイルを確認し、ファイルに変更がないことを確認する
downloading: アプリケーションキャッシュリソースのダウンロードを開始するときにトリガーされます
progress: ファイル内アプリケーションキャッシュのダウンロードプロセス中に継続的にダウンロードすることによってトリガーされます
updateready: ページ上の新しいアプリケーションキャッシュがダウンロードされたときにトリガーされます
cached: アプリケーションキャッシュが完全に利用可能になったときにトリガーされます

アプリケーションキャッシュの 3 つの利点:

① オフライン閲覧
② ページの読み込み速度の向上
③ サーバー負荷の軽減

注:

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 サイトの他の関連記事を参照してください。