离线存储

离线Web应用程序的基本概念
离线存储中浏览器与服务器之间的交互过程
进行本地缓存时所使用到的applicationCache对象

离线Web应用程序的基本概念

什么是离线Web应用程序？
为什么要开发离线的Web应用程序？
什么是本地缓存？
本地缓存和网页缓存有什么区别？
什么是manifest文件？
如何在manifest文件中指定哪些内容需要进行本地缓存？哪些内容不需要？

什么是离线Web应用程序？

当客户端本地与Web应用程序的服务器没有建立连接时，也能正常在客户端本地使用该Web应用程序进行有关操作

为什么要开发离线的Web应用程序

离线浏览

用户可以在应用离线时使用它们

速度

已缓存资源加载得更快

减少服务器负载

浏览器将只从服务器下载更新过或者更改过的资源

浏览器对离线存储的支持

什么是本地缓存？

把构建Web应用程序的资源文件，如HTML文件、CSS文件、JavaScript脚本文件等等都放在本地，在没有网络连接的情况下，可以利用本地缓存中的资源文件来正常运行Web应用程序。

本地缓存和浏览器网页缓存的区别

服务对象不同
本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页。
本地缓存比浏览器网页缓存更安全，更可靠
1、无法知道网站中到底缓存了哪些网页，以及缓存了网页中的哪些资源；
2、本地缓存是可靠的，我们可以控制对哪些内容进行缓存，哪些内容不需要缓存

浏览器网页缓存参考资料：http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html

什么是manifest文件

Manifest文件是一个简单的文本文件，在该文件中以清单的形式列举了需要被缓存和不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径

如何在manifest文件中指定哪些内容需要进行本地缓存？哪些内容不需要？

CACHE MANIFEST
#v12

CACHE:
dog1.jpg
dog2.jpg
dog3.jpg

NETWORK:
http://s8.qhimg.com/static/637d69428758a564/jquery/1.9.1/jquery.js

告知浏览器启用离线缓存

1
2
3

<!DOCTYPE html>
<html lang="zh-cn" manifest="mf.manifest">
</html>

浏览器与服务器的交互过程

首次访问

再次访问

applicationCache对象的事件

oncached: 当离线资源存储完成之后触发事件
onchecking:当浏览器对离线资源进行更新检查的时候触发这个事件
ondownloading:当浏览器开始下载离线资源时触发这个事件
onprogress:当浏览器在下载每一个资源的时候触发这个事件，每下载一个就触发一次；
onupdateready:当浏览器对离线资源更新完成之后触发这个事件
onnoupdate: 当浏览器检查更新之后发现没有资源更新时触发这个事件