ホームページ > 記事 > ウェブフロントエンド > html5にはどのような保存方法があるのでしょうか？

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

青灯夜游オリジナル: 2022-03-15 14:51:414688ブラウズ

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

このチュートリアルの動作環境: 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. オフラインキャッシュにより、ブラウザーにリソースを更新するようアクティブに通知できます

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

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

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

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

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

注:

関連記事

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

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

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

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