开发离线Web应用的步骤：
1.检测设备是否可以上网；
2.能访问一定的资源；
3.有一块本地空间保存数据。
1. 离线检测：
如何检测设备是否可以上网？
HTML5定义了navigator.onLine属性，值为true表示能上网，值为false表示设备离线。
HTML5还定义了两个事件，在window对象上触发：
online:网络从离线变为在线
offline:网络从在线变为离线
2. 应用缓存：
从缓存中访问离线资源
HTML5的应用缓存为appCache(application cache)，它是从浏览器缓存中分出来的一块缓存区。通过一个描述文件列出缓存清单：
CACHE MANIFEST
#Comment
file.js
file.css
这些清单中的文件会下载下来，在离线时使用。
该清单如何与页面连接？
在html标签中manifest属性中指定清单的路径
<html manifest="/offline.manifest">
3. 数据存储
在一块本地空间中保存数据。
3.1 Cookie
Cookie是最初的数据存储方法，服务器端创建cookie，在HTTP请求头中将Set-Cookie作为响应的一部分。
A. 限制
Cookie绑定在特定的域名下，当创建了cookie后，返回响应时，cookie会保存在客户端中，为了保证cookie不会占用太多磁盘空间，还有更好的浏览器兼容性，cookie有以下限制：
每个域的cookie总数是有限的；
浏览器对于cookie的尺寸也有限制，不能过长。
B. cookie的构成
名称：唯一确定cookie的名称。
值：储存在cookie中的字符串值。
域：cookie对于哪个域有效。
路径：对于指定域中的路径，才会发送cookie。
失效时间：cookie何时被删除。
安全标志：只有在SSL连接时才发送到服务器，即链接为https开头。
域、路径、失效时间、安全标志是服务器给浏览器的指示，以告知浏览器何时应该在请求中发送cookie。
C. JS中的cookie
JS中处理cookie的接口为document.cookie属性。
D. 子cookie
为了解决浏览器对某域名下的cookie数的限制，引入子cookie，使用cookie值存储多个名称值对儿。
name=name1=value1&name2=value2&name3=value3
E. 关于cookie的思考：
尽可能在cookie中少存储信息，以避免影响性能。
由于cookie的性质和局限不能存储大量信息，因此出现了其他的方法。
3.2 Web存储机制
Web Storage 的目的是客服cookie带来的一些限制，数据可以一直保存在客户端，无需发回服务器。
它的目标为：
提供在cookie之外保存会话数据的途径；
可以保存大量数据。
主要有两个windows对象：sessionStorage和globalStorage
A. Storage对象：
跨会话持久化数据并遵循跨域安全策略。
有如下方法：
clear()：删除所有值
getItem(name):根据指定的名字name获取对应的值
key(index):获得index处的值的名字
removeItem(name):删除由name指定的名值对儿
setItem(name,value):为指定的name设置一个对应的值
B. sessionStorage对象：
在一个浏览器会话中存储数据，浏览器关闭后数据立即删除。
3.3 IndexedDB
IndexedDB是在一种数据库，保存浏览器中的结构化数据，保存的形式为对象。
网友评论