定义：离线=没有网络环境/弱网络
1、离线浏览--缓存数据
场景：新闻、阅读、视频
2、本地保存用户操作数据
场景：邮箱软件（离线编辑、在线发送）
典型案例：FT中文网
html5提供的数据持久化技术
1、Application Cache 本地缓存应用所需的文件
2、Local Storage&Session Storage 键值对存储数据
3、Web SQL 关系数据库，通过SQL语句访问
4、IndexDB 索引数据库
Application Cache ：
<html manifest="phone.manifest">
manifest 属性规定文档的缓存 manifest 的位置。
HTML5 引入了应用程序缓存，这意味着 Web 应用程序可以被缓存，然后在无互联网连接的时候进行访问。
应用程序缓存使得应用程序有三个优点：
1、离线浏览 - 用户可以在离线时使用应用程序
2、快速 - 缓存的资源可以更快地加载
3、减少服务器加载 - 浏览器只从服务器上下载已更新/已更改的资源
另外有三个特点：
1、manifest文件有变化才更新
2、一次必须更新manifest中所有的文件
3、下次才生效
注意：Internet Explorer 9 及之前的版本不支持 manifest 属性。
LocalStorage
主要存储离线webapp的方式
注：Chrome浏览器中localStorage最大5120kb，即5M。
测试浏览器支持localstorage大小的方法：
(function() { if(!window.localStorage) { console.log('当前浏览器不支持localStorage!') } var test = '0123456789'; var add = function(num) { num += num; if(num.length == 10240) { test = num; return; } add(num); } add(test); var sum = test; var show = setInterval(function(){ sum += test; try { window.localStorage.removeItem('test'); window.localStorage.setItem('test', sum); console.log(sum.length / 1024 + 'KB'); } catch(e) { alert(sum.length / 1024 + 'KB超出最大限制'); clearInterval(show); } }, 0.1) })()
webSQL
浏览器本地数据库。特点：占用资源少，处理速度快。
三个核心方法：
1、openDatabase 使用现有的数据库或新建
2、transaction 事务提交或回滚
3、executeSql 执行真实的sql查询