ホームページ > 記事 > ウェブフロントエンド > html5オフラインストレージとは何ですか?

html5オフラインストレージとは何ですか?

青灯夜游オリジナル: 2021-12-01 14:29:465857ブラウズ

html5 オフラインストレージには 2 つのタイプがあります: 1. localstorage (ローカルストレージ)、通常は静的リソース (静的ページ) のキャッシュに使用されます; 2. アプリケーションキャッシュ (アプリケーションキャッシュ)、通常は AJAX リクエストのキャッシュに使用されます。重要ではない AJAX データを保存します。

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

オフラインストレージテクノロジー

HTML5 では、localstorage と Application Cache という 2 つの主要なオフラインストレージテクノロジーを提案しています。どちらにも独自のアプリケーションシナリオがあります。従来のオフラインストレージテクノロジーは Cookie です。

(1) アプリケーションキャッシュ: 通常、静的リソース (静的ページ) をキャッシュするために使用されます。

(2) LocalStorage (ローカルストレージ): 通常、重要ではない AJAX データを保存するための AJAX リクエストキャッシュに使用されます。

そして、Cookie は小さなテキスト (4096 バイト) しか保存できません。したがって、大きなデータは保存できません。これが、Cookie と上記のキャッシュテクノロジの違いの 1 つです。HTTP はステートレスであるため、サーバーにはリクエストを区別します。同じサーバーからのものかどうかを識別する文字列が必要です。このタスクは Cookie によって完了します。このテキストは、ユーザーの権限を確認するために毎回サーバーとブラウザの間で渡されます。

つまり、アプリケーションキャッシュのアプリケーションシナリオが異なるため、使用方法が一貫していません。

アプリケーションキャッシュとは

HTML5 では、Web アプリケーションをキャッシュしてネットワークなしで使用できるアプリケーションキャッシュテクノロジが導入されており、キャッシュマニフェストファイルを作成することで、オフラインアプリを簡単に作成できます。

アプリケーションキャッシュによってもたらされる 3 つの利点は次のとおりです。

① オフラインブラウジング

② ページの読み込み速度の向上

③ サーバーの負荷の軽減

すべての主要なブラウザはアプリケーションキャッシュをサポートしています。サポートしていない場合でも、プログラムには影響しません

アプリケーションキャッシュによってオフラインで保存されるアプリケーションとは何ですか

飛行機、携帯電話の信号が弱いため、講義に行くときにネットワークがない可能性があります。現時点では、オフラインストレージを使用できます

ネットワークがオンラインかどうかを検出します

今すぐネットワークがオフラインのときにアプリケーションキャッシュがクライアント上のファイルのキャッシュを読み取るために使用されることはわかっていますが、ネットワークがオンラインかどうかを確認するにはどうすればよいでしょうか?

ネットワークの OnLine プロパティを次のように検出します。

if (navigator.onLine == true){
  　　alert("正常上网")
}
else{
　　  alert("无法连接网络") 
}

オフラインストレージの使用方法

ブラウザ側

ブラウザでは簡単な設定のみが必要です。ドキュメントのタグにマニフェスト属性を含めます

<html manifest="demo.appcache">

推奨されるファイル拡張子は .appcache です。初めて Web ページにアクセスすると、ファイルはローカルにキャッシュされます。次回ネットワークがない場合は、サーバーにアクセスせずに、このファイルリストを取得します。

サーバー側

サーバータイプ「text/cache-manifest」に正しく構成された MIME を追加します。 Web サーバー上で設定する必要があります。

Web サイトのほとんどがインタラクティブ機能を備えているため、現在はあまり普及していませんが、インタラクティブ機能がなければ、Web サイトは単なる表示となり、ほとんど意味がありません。

ブラウザ側の .appcache ファイルリストの使用に関する詳細な説明

CACHE MANIFEST

CACHE:
# 需要缓存的文件列表
style1.css
1.jpg
01.js
http://localhost/applicationcache/02.js
http://localhost/applicationcache/zepto.js

NETWORK:
# 不需要缓存的
4.jpg

FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg

ネットワークなし後のデモ画像: