参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：
HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
浏览器如何对HTML5的离线储存资源进行管理和加载？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
注意：
- 如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
- 对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。
- 浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
- 在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
//offline.html3、在离线状态时，操作window.applicationCache进行需求实现。
manifest组成：
离线存储的manifest一般由三个部分组成:
- CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
- NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
- FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。
HTML5中离线存储对象window.applicationCache的几个事件：
- oncached:当离线资源存储完成之后触发这个事件。
- onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
- ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
- onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。
- onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
- onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件
- onerror 当缓存资源失败的时候触发（当览器处于离线状态，检查清单列表失败，或当一个未缓存的应用程序引用一个不存在的清单文件，会触发此事件）
- onobsolete：当一个缓存的应用程序引用一个不存在的清单文件（未找到文件，返回404或410）时触发，同时将应用从缓存中移除之后不会从缓存而是通过网络加载资源。（网上看到好多文章关于这里写的是404和401，但结合obsolete状态的描述来看，觉得此处应为404和410）
缓存状态
每个应用缓存都有一个状态，标示着缓存的当前状况。共享同一清单 URI 的缓存拥有相同的缓存状态，可能是其中之一：
0 UNCACHED(未缓存)：一个特殊的值，用于表明一个应用缓存对象还没有完全初始化。
1 IDLE(空闲)：应用缓存此时未处于更新过程中。
2 CHECKING(检查)：清单已经获取完毕并检查更新。
3 DOWNLOADING(下载中)：下载资源并准备加入到缓存中，这是由于清单变化引起的。
4 UPDATEREADY(更新就绪)：一个新版本的应用缓存可以使用。有一个对应的事件updateready，当下载完毕一个更新，并且还未使用 swapCache()方法激活更新时，该事件触发，而不会是 cached 事件。
5 OBSOLETE(废弃)：应用缓存现在被废弃。manifest的请求出现404或410错误，应用程序缓存被取消或更新缓存的请求失败。
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
