web-dev-qa-db-ja.com

HTML5ローカルストレージVSアプリキャッシュオフラインWebサイトの閲覧

複数の記事を読みましたが、ローカルストレージとアプリキャッシュマニフェストの違いについてはまだはっきりしていません。

また参照： Is AppCache = Application Cache = Web Storage's LocalStorage？ （SO 10986026）、 Application Cache is a Douchebag （A List Apart）

私のAIMは、ユーザーの要求に応じて特定のページをオフラインでユーザーに許可するWebサイトを構築することです。

続くステップ：

  • Chrome=： http://www.spritecow.com/ にサイトを開きました
    そしてチェックされたAppCache：chrome：// appcache-internals /
    そしてサイトはキャッシュされました。

  • 私はChromeを閉じてリロードしました。キャッシュはまだそこにありました。オフラインブラウジングに必要なもの

  • これはローカルストレージとどう違うのですか？違いを見つけようとしましたが、すべてのサイトが意図的に答えています。つまり、テンプレートのキャッシングにはAppCacheを、テンプレート内のコンテンツにはローカルストレージを使用しています。

  • 特定のサイトでは、1行の変更でキャッシュ全体をリロードするため、AppCacheを好まない場合があります。特定のサイトはローカルストレージのみを優先します。 AppCache（template）とLocalstorageの組み合わせを利用する人もいます。

今の疑問は：

  • クライアントマシン上のローカルストレージストア。ブラウザが閉じていてもアクセスできる場合、AppCacheストレージはどのように異なりますか？.

  • キャッシュをクリアするとAppCacheがクリアされるため、ローカルストレージのみを使用します。

  • オフラインブラウジングのベストプラクティスは何ですか？私はこれに完全に新しいので、同じことについて少し明確にする必要があります

編集

リンク（ Is AppCache = Application Cache = Web Storage's LocalStorage？ ）は疑問を解決しませんが、これは違いをもたらしますが、オフラインブラウジングプラクティスの目的に基づいていません（これがこの疑問の目的です）。 。

javascripthtmllocal-storagehtml5-appcachecache-manifest
13
zeetit

AppCacheマニフェストファイルを使用して、アプリで使用するファイルを保存するように定義します（HTMLページ、JSスクリプト、CSSスタイル、画像などのファイルとリソースをキャッシュできます）。

LocalStorageはデータを保存しますが、ページは保存しません。したがって、文字列化できるすべてのJavaScriptオブジェクトをlocalStorageに保存できます。

したがって、AppCacheとlocalStorageは同じではありませんが、相補的です。

例

オフラインで使用できるようにするWebカレンダーを想像してください（注：この例では、静的ページを使用し、データはJavaScriptで読み込まれます。動的ページからも同じことができますが、この例では静的を使用しています）。

Appcacheは、htmlページと、ページのレンダリングに使用するリソース（javascripts、css、images）を格納します。次のオフラインアクセス用にキャッシュするすべてをマニフェストファイルに入力すると、ページが保存され、次回のアクセス時にページをオフラインで表示できるようになります。

しかし、問題はあなたのカレンダーが表示されますが、空です。その月のすべての会議とイベントはありません。これはページが保存されているためですが、カレンダーに会議を読み込むにはネットワークが必要です。そして、オフラインではネットワークがありません...

すべての会議をオフラインで利用できるようにするには、それらをローカルストレージに保存する必要があります（これはappCacheではなく、ページではないため、JavaScriptによってアクセスされるデータです）。したがって、JavaScript関数を変更する必要があります。これから ：

function initApp() {
  var data = loadDataWithAjax();
  renderPlanning(data);
}

これに

function initApp () {
  var data;
  if(offline) {
    data = loadFromLocalStorage();
  } else {
    data = loadDataWithAjax();
    storeDataInLocalStorage(data);
  }
  renderPlanning(data);
}
18
ylerjen

Appcacheは、完全にオフラインでブラウザが閉じていて、オフラインのままブラウザを開いてURLを入力した場合でも機能します。ページが読み込まれます。これをチェックしてください ここにサイト …オンライン中に一度ロードしてからインターネットから切断し、ブラウザを閉じてから、ブラウザを再度開いて、オフライン中にアクセスしてみてください。

localStorageからデータを取得するために必要なjsコードをロードするには、最初に接続が必要です。

2
iSpeakMachines