离线应用与客户端存储
（一）离线检测
navigator.onLine属性，值为true表示设备能上网，否则为离线，但在不同浏览器有差异。单独使用navigator.onLine不能确定网络是否联通，但请求发生错误时检测它仍然有用。
online和offline 当网络从离线变成在线或在线变成离线 会触发者两个事件。
检测应用是否离线，在页面加载后，先通过navigator.onLine取得初始状态，然后通过这两个事件确定网络是否变化。
IE6+（只支持navigator.onLine属性） Firefox3 Safari 4 Opera 10.6 Chrome iOS 3.2
（二）应用缓存
appcache 为开发离线Web应用而设计。 描述文件列出要下载和缓存的资源。
<html>的manifest属性中指定这个文件的路径。
status属性表示应用缓存的当前状态。
Firefox 3+ Safari 4+ Opera 10.6 Chrome
（三）数据存储
1.cookie
服务器对任意HTTP请求发生Set-Cookie HTTP头作为响应的一部分。
HTTP /1.1 200 OK Content-type: text/html Set-Cookie: name=value Other-header: other-header-value
这个HTTP相应设置以name为名称、value为值的一个cookie，名称和值都以URL编码传递。
浏览器通过为每个请求添加Cookie HTTP头将信息发送给服务器
GET /index.html HTTP/1.1 Cookie: name=value Other-header: other-header-value
①限制
每个域的cookie总数有限，尺寸也有限制。
②cookie的构成
名称：不区分大小写。必须经过URL编码。
值：储存在cookie的字符串值，必须被URL编码。
域：cookie对哪个域有效。默认认作来自设置cookie的那个域。
路径：对于指定域的那个路径，应该向服务器发送cookie。
失效时间：cookie何时应该被删除的时间戳，值是GMT格式的日期。
安全标志：指定后，cookie只有在使用SSL连接时才发送到服务器。
每一段信息作为Set-Cookie的一部分，用分号加空格分隔
HTTP /1.1 200 OK Content-type: text/html Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path/; secure Other-header: other-header-value
域、路径、失效时间和secure标志都是服务器给浏览器的提示，这些参数不会作为发送给服务器的cookie信息的一部分，只有名值对才发送。
③javascript的cooki
BOM的document.cookie属性会因为使用它的方式不同而表现出不同行为。
当用来获取属性值时，document.cookie返回当前页面可用的所有cookie的字符串，一系列由分号隔开的名值对，必须使用decodeURIComponent()对名和值进行URL编码。
当用于设置值时，document.cookie属性可以设置一个新的cookie字符串，会被解析并添加到现有的cookie，除非设置的名称已存在，否则不会覆盖。
var cookieName = encodeURIComponent(name) + "=" +encodeURIComponent("Nicholas") + "; domain=.worx.com; path/";
④子cookie
为了绕开浏览器的单域名下的cookie数限制而使用。常见格式：
name=name1=value1&name2=value2&name3=value3&name4=value4
子cookie一般也以查询字符串的格式进行格式化，然后这些值可以使用单个cookie进行存储和访问。
⑤关于cookie的思考
2.IE用户数据
IE 5 使用持久化用户数据，首先使用CSS某个元素指定userData行为，然后使用setAttribute方法保存数据，为了将数据提交到浏览器还要调用save()告诉它数据空间的名称。下次页面载入后可以使用load()指定 同样的数据空间来获取数据。removeAttribute()方法指定删除某元素数据。
3.Web存储机制
Web Stroage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端时，无需持续将数据发回服务器，它的两个主要目标是：提供一种在cookie之外存储会话数据的途径、提供一种存储大量可以跨会话存在的数据的机制。
sessionStorage和globalStorage对象以window对象属性存在
IE8+ Firefox 3.5+ Chrome 4+ Opera 10.5+
①Stroage类型
提供最大的存储空间
②seessionStorage对象
存储特定于某个会话的数据，只保持到浏览器关闭，主要用于只针对会话的小段数据的存储。
③globalStroage对象
目的是跨越会话存储数据，有特定的访问限制。
④localStroage对象
在修订过的HTML5规范作为持久保存客户端数据的方案取代了globalStorage。
⑤stroage事件
对storage对象任何修改都会在文档上触发storage事件。
⑥限制
每个来源都有固定大小的空间保存自己的数据。
4.IndexedDB
是在浏览器保存结构化数据的一种数据库，其思想是创建一套API，方便保存和读取javascript对象，还支持查询和搜索。
操作完全是异步进行，差不多每一次操作都要注册onerror或onsuccess事件处理程序。
①数据库
它的最大特色是使用对象保存数据，而不是使用表。
②对象存储空间
使用对象存储空间，如果数据库版本与传入的版本不匹配可能要创建新的对象存储空间。在创建对象存储空间必须指定键，作为唯一的数据。
③事务
调用transaction()方法可以创建事务，任何时候想读取或修改数据都通过事务来操作。
④使用游标查询
在需要检测多个对象的情况下需要在事务内部创建游标。游标是指向结果集的指针，先指向结果的第一项，接到查询下一项的指令时才指向下一项。
⑤键范围
由IDBKeyRange的实例表示。
⑥设定游标方向
openCursor()可接受两个参数。
⑦索引
创建索引先要引用对象存储空间，然后调用createInedx()方法。
⑧并发问题
只有浏览器仅有一个标签页使用数据库的情况下，调用setVersion才能完成操作。
⑨限制
只能由同源页面操作，不能跨域共享信息；每个来源的数据库占用的磁盘空间有限制。