Explication détaillée de la façon de faire la distinction entre le stockage hors ligne HTML5 et les instances de cache local

1. Stockage hors ligne

Il existe une application Web avec trois fichiers index.html, a.js, b.css. Il faut maintenant mettre en cache les fichiers js et css.

1. Ajoutez

à index.html 2. Le format du manifeste est le suivant

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

3. Le mime du type de fichier manifeste doit être de type texte/cache-manifest

Remarque :

1. Pour chaque index.html?id=1 ou index.html?id=2, l'index sera mis en cache séparément. page html, vous pouvez l'observer via le navigateur Chrome Ressources/Cache d'application

2. Si vous souhaitez mettre à jour le contenu du cache, modifiez simplement le fichier manifeste, par exemple en changeant la version. numéro v1.0.1

4. Si les ressources du stockage hors ligne sont mises à jour, vous pouvez les surveiller via le code suivant, mais le premier chargement sera toujours la version originale

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. Cache local

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

1. Le stockage local n'expirera jamais à moins que vous ne l'effaciez vous-même

2. Vous pouvez le visualiser via le navigateur Chrome Ressources/Stockage local

3. Même si la clé est la même dans différents domaines, elle ne sera pas récupérée. Les valeurs obtenues sont également différentes, comme localhost et 127.0.0.1

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!