HTML5 sessionStorage localStorageキャッシュとアプリケーションキャッシュ

1つは、sessionStorageの使用

1.存储数据到本地，存储的容量5mb左右

2.这个数据的本质是存储在当前页面的内存中

3.它的生命周期为关闭当前页面，关闭页面数据会自动清除

api：

setItem（key、value）：データを保存し、キーと値のペアで保存します
getItem（key）：データを取得し、指定された名前のキーを介して対応する値を取得します
removeItme（key）：データを削除し、指定された名前のキーを介して対応する値valueを削除します
clear（）：保存されているすべてのコンテンツをクリアします

  window.sessionStorage.setItem('id', 1)
  window.sessionStorage.getItem('id')
  window.sessionStorage.removeItem('id')
  window.sessionStorage.clear()

第二に、localStorageの使用

1.存储的容量20mb左右

2.在不同浏览器不能共享数据，但是在同一个浏览器的不同窗口可以共享数据

3.永久生效。它的数据存储在硬盘上，并不会随着页面或者浏览器的关闭而清除

api：

setItem（key、value）：データを保存し、キーと値のペアで保存します
getItem（key）：データを取得し、指定された名前のキーを介して対応する値を取得します
removeItme（key）：データを削除し、指定された名前のキーを介して対応する値valueを削除します
clear（）：保存されているすべてのコンテンツをクリアします

  window.localStorage.setItem('id', 1)
  window.localStorage.getItem('id')
  window.localStorage.removeItem('id')
  window.localStorage.clear()

3、アプリケーションキャッシュ

1.コンセプト
HTML5を使用して、キャッシュマニフェストファイルを作成することにより、Webアプリケーションのオフラインバージョンを簡単に作成する

2.利点：

キャッシュされる構成可能なリソース
アプリケーションはネットワークに接続しなくても引き続き利用できます
キャッシュリソースをローカルで読み取り、アクセス速度を向上させ、ユーザーエクスペリエンスを向上させる
リクエストとキャッシュサーバーの負担を軽減

3.キャッシュマニフェストベース：

アプリケーションのキャッシュを有効にするには、ドキュメントタグにmanifest属性を含めます。

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

指定されたマニフェストを持つすべてのページは、ユーザーがアクセスしたときにキャッシュされます。manifest属性が指定されていない場合、ページはキャッシュされません（ページがマニフェストファイルで直接指定されている場合を除く）。
マニフェストファイルの推奨ファイル拡張子は、「。appcache」です。
マニフェストファイルは、正しいMIMEタイプ、つまり「text / cache-manifest」で設定する必要があることに注意してください。Webサーバーで構成する必要があります

4.マニフェストファイル：

コンセプト：マニフェストファイルは、何をキャッシュするか（何をキャッシュしないか）をブラウザーに伝える単純なテキストファイルです。
マニフェストファイルは3つの部分に分けることができます

キャッシュマニフェスト開始
この見出しの下にリストされているCACHEファイルは、最初のダウンロード後にキャッシュされます
NETWORK-この見出しの下にリストされているファイルにはサーバーへの接続が必要であり、キャッシュされません
フォールバック-この見出しの下にリストされているドキュメントは、ページにアクセスできない場合のフォールバックページを指定します（404ページなど）。

キャッシュマニフェストの説明：

最初の行に配置されたキャッシュマニフェストが必要です：

CACHE ：
/theme.css
/logo.gif
/main.js

上記のマニフェストファイルには、CSSファイル、GIF画像、JavaScriptファイルの3つのリソースがリストされています。マニフェストファイルが読み込まれると、ブラウザーはこれら3つのファイルをWebサイトのルートディレクトリからダウンロードします。その後、ユーザーがインターネットから切断されても、これらのリソースは引き続き使用できます
。4.ネットワークの説明：
NETWORKセクションでは、ファイル "login.asp"は決してキャッシュされず、オフラインの場合は使用できません。

NETWORK:
login.asp

フォールバックの説明：
フォールバックセクションでは、インターネット接続を確立できない場合、次のように、リクエストされたURLリソースの代わりに指定されたリソースが使用されることを規定しています。

FALLBACK:
/html5/ /404.html

注：html5リソースをオフライン状態でリクエストできない場合は、代わりに404.htmlを使用してください

その他：

キャッシュ：省略できます。この場合、キャッシュマニフェストにキャッシュする必要があるリソースを書き込みます
複数のCACHE：NETWORK：FALLBACK：を指定できます。順序の制限はありません。
＃コメントを示します。demo.appcacheファイルのコンテンツが変更された場合、または手動でキャッシュをクリアした場合のみ、再キャッシュされます。
Chromeはchrome：// appcache-internals /ツールとオフラインモードを使用して、アプリケーションキャッシュをデバッグおよび管理できます

キャッシュの更新：
ファイルがキャッシュされると、サーバー上のファイルが変更されても、ブラウザーはキャッシュされたバージョンを表示し続けます。ブラウザが確実にキャッシュを更新するためには、マニフェストファイルも更新する必要があります。つまり、アプリケーションがキャッシュされると、次のことが発生するまでキャッシュされたままになります。
ユーザーがブラウザのキャッシュをクリアする
マニフェストファイルが変更されている（以下のヒントを参照）
プログラムによるアプリケーションキャッシュの更新

注：コメント行の日付とバージョン番号を更新することは、ブラウザにファイルを再キャッシュさせる方法です

例-完全なマニフェストファイル


CACHE MANIFEST
#上面一句代码是当前文档的第一句
#后面写的是注释

#需要缓存的文件清单列表
CACHE:
../imgs/1.jpg
../imgs/2.jpg
# *:代表所有文件

#配置每一次都需要从服务器获取的文件清单列表
NETWORK:
../imgs/3.jpg

#配置如果文件无法获取则使用指定的文件进行代替
FALLBACK:
../imgs/4.jpg ../imgs/5.jpg
# /:代表所有文件

HTML5 sessionStorage localStorageキャッシュとアプリケーションキャッシュ

1つは、sessionStorageの使用

第二に、localStorageの使用

3、アプリケーションキャッシュ

例-完全なマニフェストファイル

おすすめ