一、问题的引出
当用户没有与Internet连接，用户就不能利用web应用程序
二、解决方案
为了让web应用程序在离线状态也能正常工作，引入了本地缓存机制
三、原理
为了让web应用程序在离线状态也能正常工作，必须将web应用程序锁需要的资源文件放在本地缓存中，当用户离线的时候，利用本地缓存中的资源来使web应用程序正常工作
四、本地缓存与网页缓存的区别
| 本地缓存 | 网页缓存 | |
| 服务对象不同 | 针对整个web应用程序 | 针对单个网页 |
| 缓存内容不同 | 只缓存指定的资源 | 任何网页都有页面缓存 |
| 安全性 | 可靠的，因为可以控制缓存的内容 | 不可靠的，不知道到底缓存了哪些资源 |
五、浏览器与服务器的交互过程
假设网址为http://amylover网站，index.html为首页
1 浏览器请求访问http://amylover
2 服务器返回index.html网页
3 浏览器解析index.html网页，请求该页面中的所有资源，包括html文件，图像文件、css文件，js文件以及mnifest文件(该文件里面指定了哪些资源需要本地缓存)
4 服务器返回3中请求的资源
5 浏览器处理manifest文件，请求manifest文件中要求的需要本地缓存的文件资源，即使这些资源已经被请求过了
6 浏览器返回所有5中请求的资源
7 浏览器对本地缓存进行更新，触发本地缓存准备被更新的事件，将6中返回的资源存放于本地缓存中
如果在上述过程进行完毕，浏览器再次打开http://amylover，而且manifest文件没有被修改，交互过程如下
1 浏览器再次请求http://amylover
2 浏览器发现该页面被本地缓存，于是使用本地缓存中的index.html页面
3 浏览器解析index.html页面，使用所有本地缓存中的资源
4 浏览器向服务器请求manifest文件
5 服务器返回更新过manifest文件
6 浏览器处理5中返回的manifest文件，如果发现该文件被更新，请求该文件中所有需要本地缓存的资源
7 浏览器返回6中请求的资源
8 浏览器利用7中返回的资源对本地缓存进行更新，并触发本地缓存准备被更新的事件
六、manifest文件：
6.1 本地缓存是通过每个页面的manifest文件进行管理，
6.2 manifest文件是一个简单的文本文件，以清单的形式列举了哪些资源需要缓存，哪些资源不需要缓存，以及资源的访问路径
6.3 可以为每个页面都指定一个manifest文件，也可以为整个web应用程序指定一个总的manifest文件
6.4 第一行必须是CACHE MANIFEST，将本文件的作用告诉浏览器
6.5 需要对服务器进行配置，让服务器支持text/cache-manifest类型，例如appache服务器的{apache_home}/conf/mime.types文件的最后一行加上text/cache-manifest manifest
6.6 manifest文件中注释使用#
6.7 在列举资源时，将资源分为三类，分别是CACHE、NETWORK和FALLBACK
6.8 CACHE是指需要本地缓存的资源、NETWORK是显式指定不需要本地缓存的资源、FALLBACK指定两个资源，第一个是指在线使用，第二个是指当用户离线时使用的备用资源
6.9 为了让浏览器正常阅读manifest文件，需要在页面的html标签的manifest属性中指定manifest文件的url地址
<html manifest="index.manifest">
七、applicationCache对象
7.1 该对象代表本地缓存
7.2 交互过程中的applicationCache对象
1 浏览器请求访问http://amylover
2 服务器返回index.html页面
3 浏览器发现了html的manifest属性时，触发checking事件，检查manifest文件是否存在，不存在触发error事件，表示manifest文件不存在
4 浏览器解析index.html，并请求该页面的所有资源
5 服务器返回4中请求的所有资源
6 浏览器处理manifest文件，并请求该文件要求本地缓存的所有资源，即使5中已经返回这些资源
7 服务器返回6中请求的资源
8 浏览器触发applicationCache对象的downloading事件，开始下载7中返回的资源，在下载的过程中周期触发applicationCache对象的progress事件，获取多少文件本下载，还有多少在下载队列中
9 下载完毕触发applicationCache对象的cached事件，表示首次缓存成功
10 如果再次访问http://amylover，1-5一致，执行步骤5之后，浏览器检查manifest文件是否本更新，如果没有触发applicationCache对象的noupdate事件，不再执行后续操作
如果manifest文件被更新执行后续操作，但是不再执行步骤9中的cache事件，而是触发updateready事件
7.3 更新
可以用applicationCache对象来通知用户本地缓存被更新，也允许用户手动进行本地缓存的更新
7.3.1 applicationCache对象的undateready事件是指当更新过的manifest文件所需要的资源下载完毕后，本地缓存准备被更新时触发，如果本地缓存很大，那么本地缓存的更新将是一个 很漫长的过程，并且在更新过程中还会把浏览器锁住，在这种情况下，最后给用户一个提示，告诉用户正在进行本地缓存的更新
applicationCache.onUpdateReady=function(){ alert("本地缓存正在被更新"); };
7.3.2 swapCache()方法
如果不调用该方法，本地缓存会在下一次打开本页面的时候被更新，而使用该方法，本地缓存会立即更新，但是注意虽然使用swapCache方法对本地缓存进行了更新，但是本页面的图像和脚 本文件等并没有被更新，只有在刷新页面或者重新打开时才会更新
applicationCache.onUpdateReady=function(){ alert("本地缓存正在被更新");
applicationCache.swapCache();
alert("本地更新完毕，请刷新您的页面获取最新的版本"); };