Detailed explanation of how to distinguish between html5 offline storage and local cache instances

1. Offline storage

There is a web application with three files index.html, a.js, b.css. Now we need to cache the js and css files

1. Add

to index.html 2. The manifest format is as follows

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

3. The mime-type of the manifest file Must be text/cache-manifest type

Notes:

1. The index.html page will be cached separately for each index.html?id=1 or index.html?id=2 , you can observe it through the chrome browser Resources/Application Cache

2. If you want to update the cache content, just modify the manifest file, such as changing the version number v1.0.1

4. Offline storage If the resource is updated, you can monitor it through the following code, but the first load will still be the original version

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. Local cache

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

1. Local The storage never expires unless you clear it yourself

2. You can view it through the chrome browser Resources/Local Storage

3. Even if the key is the same in different domains, the values ​​that cannot be obtained are different. Such as localhost and 127.0.0.1

The above is the detailed content of Detailed explanation of how to distinguish between html5 offline storage and local cache instances. For more information, please follow other related articles on the PHP Chinese website!