html5 オフライン ストレージとローカル キャッシュ インスタンスを区別する方法の詳細な説明

1. オフライン ストレージ

3 つのファイル、index.html、a.js、b.css を持つ Web アプリケーションがあります。次に、js および css ファイルをキャッシュする必要があります

1.

2. マニフェストの形式は次のとおりです

CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html

3. マニフェストファイルの MIME タイプは text/cache-manifest タイプである必要があります

注:

1.各index.html?id=1またはindex.html?id=2はそれぞれindex.htmlページをキャッシュし、Chromeブラウザのリソース/アプリケーションキャッシュを通じて確認できます

2. キャッシュコンテンツを更新したい場合、バージョン番号を v1.0.1 に変更しました

など、マニフェスト ファイルを変更するだけです 4. オフライン ストレージ リソースが更新された場合、次のコードを通じて監視できますが、最初のロードは元のバージョンのままです

window.applicationCache.addEventListener('updateready',function(e){    
  if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
    window.applicationCache.swapCache();        
    if(confirm("loding new?")){
      window.location.reload()
    }
 }
},false)

2. ローカルキャッシュ

localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()

1. ローカル 自分でクリアしない限り、ストレージは期限切れになりません

2. Chromeブラウザのリソース/ローカルストレージから閲覧できます

3. キーが同じでもドメインが異なるとlocalhostや127.0.0.1など取得できない値も異なります

以上がhtml5 オフライン ストレージとローカル キャッシュ インスタンスを区別する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。