[k]H5存储-慕课笔记(3)
$2 H5的几种存储
(1).本地存储(localStorage & sessionStorage)
(2).离线缓存(application cache)
(3).IndexdDB和Web SQL
三：离线缓存(application cache)
![[k]H5存储-慕课笔记(3)_第1张图片](http://img.e-com-net.com/image/product/8eb32de1c8874f778cba775efab600eb.jpg)
1、H5离线缓存
可以让web应用在离线下继续使用，通过manifest文件指明需要缓存的资源。
是否在线或离线：navigator.onLine==true 则在线；反之离线。
2、离线缓存缺陷
1.更新后，第二次访问（需要刷新）才能得到最新数据；
2.服务端的manifest文件，有一个小的更新，都需要重新下载全部文件到本地缓存。
3、manifest文件结构
修改版本号标识变更
CACHE MANIFEST
#version n.n
CACHE
#需要缓存的文件
/css/sameple.css
NETWORK
#每次重新拉取的文件
*
FAILBACK
#离线下代替文件
/offline.html
4、如何使用
头部添加： <html manifest='sameple.appcache'>
并且在服务器添加 text/cache-manifest appcache
C:\xampp\apache\conf\mime.types(xampp) || C:\AppServ\Apache2.2\conf\mime.types(wamp)
5、application cache -- API
[参考] : https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache (记得选择中文语言)
(1)缓存状态
每个应用缓存都有一个状态，标示着缓存的当前状况。共享同一清单 URI 的缓存拥有相同的缓存状态，可能是其中之一：
UNCACHED(未缓存)->window.applicationCache.status=0=window.applicationCache.UNCACHED
一个特殊的值，用于表明一个应用缓存对象还没有完全初始化。
IDLE(空闲) -> window.applicationCache.status=1=window.applicationCache.IDLE
应用缓存此时未处于更新过程中。
CHECKING(检查) -> window.applicationCache.status=2=window.applicationCache.CHECKING
清单已经获取完毕并检查更新。
DOWNLOADING(下载中) -> window.applicationCache.status=3=window.applicationCache.DOWNLOADING
下载资源并准备加入到缓存中，这是由于清单变化引起的。
UPDATEREADY(更新就绪) -> window.applicationCache.status=4=window.applicationCache.UPDATEREADY
一个新版本的应用缓存可以使用。有一个对应的事件 updateready，当下载完毕一个更新，并且还未使用 swapCache() 方法激活更新时，该事件触发，而不会是 cached 事件。
OBSOLETE(废弃) -> window.applicationCache.status=5=window.applicationCache.OBSOLETE
应用缓存现在被废弃。
(2)事件
checking noupdate downloading progress cached updateready obsolete error等
(3)方法
update() 发起应用程序缓存下载进程
abort() 取消正在进行的缓存下载
swapcache() 切换成本地最新的缓存环境