1.离线检测：H5定义了navigator.online属性，为true 表示设备能上网
还定义了两个相关事件：online和offline
2 数据存储
- cookie——HTTP coolie，客户端存储会话信息的。该标准要求服务器对任意的HTTP请求发送Set-Cookie HTTP头作为响应的一部分‘
/* HTTP/1.1 200 OKContent-type: text/htmlSet-Cookie: name=value;expire=expiration_time;path=domain_path;secureOther-header: other-header-value这个HTTP响应设置以name为名称，以value为值的一个cookie，名称和值在传送时都必须时URL编码*/
2. cookie组成：
? 1. 名称
? 2. 值
? 3. 域
? 4. 路径
? 5. 失效时间
? 6. 安全标志：cookie只有在使用SSL连接时才发送到服务器
所有的值和名字都经过URL编码，必须使用decodeURIComponent（）解析
基本的cookie操作：读取，写入和删除
子cookie：为了绕开浏览器的单域名下cookie的限制，使用了子cookie（subcookie）
格式：
name=name1=value1&name2=value2&name3=value3
/* 设置子cookie */var subcookieUtil = {get: function (name, subName) {var subcookies = this.getAll(name);if (subcookies) {return subcookies[subName];} else {return null;}},getAll: function (name) {var cookieName = encodeURIComponent(name) + "=",cookieStart = document.cookie.indexOf(cookieName),cookieValue,cookieEnd,subcookies,i, len,parts,result = {};if (cookieStart) {cookieEnd = document.cookie.indexOf(";", cookieStart);if (cookieEnd == -1) {cookieEnd = document.cookie.length;}cookieValue = docuemnt.cookie.substring(cookieStart + cookieName.length, cookieEnd);if (cookieValue.length > 0) {subcookies = cookieValue.split("&");for (i = 0, len = subcookies.length; i < len; i++) {parts = subcookies[i].split("=");result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);}return result;}}return null;},set: function (name, subName, value, expires, path, domain, secure) {var subcookies = this.getAll(name) || {};suvcookies[subName] = value;this.setAll(name, subcookies, exprires, path, domain, secure);},setAll: function (name, subcookies, exprires, path, domain, secure) {var cookieText = encodeURIComponent(name) + "=",subcookieParts = new Array(),subName;for (subName in subcookies) {if (subcookies.hasOwnProperty(subName) && subName.length > 0) {subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));}}if (subcookieParts.length > 0) {cookieText += subcookieParts.join("&");if (expires instanceof Date) {cookieText += ";expires=" + expires.toGMTString();}if (path) {cookieText += ";path=" + path;}if (doamin) {cookieText += ";domain=" + domain;}if (secure) {cookieText += ‘;secure‘;}}document.cookie = cookieText;},//删除一个子cookie 而不影响其他unset: function (name, subName, path, domain, secure) {var subcookies = this.getAll(name);if (subcookies) {delete subcookies(subName);this.setAll(name, subcookies, null, path, domain, secure);}},// 删除整个cookieunsetAll: function (name, path, domian, secure) {this.setAll(name, null, new Date(), path, domain, secure);}}由于所有的cookie都会由浏览器作为请求头发送，不能存储大量信息，不能存储重要 ?敏感的数据（他人可以访问到）
3. Web存储机制
web storage——两个目标：
? 1. 提供一种cookie以外的存储途径
? 2. 提供一种存储大量可以跨会话存在的数据的机制
Storage对象有方法： getItem（name） ??setItem(name,value)
web storage规范了两个window的属性：
? 1. sessionStorage：该数据至保持到浏览器关闭，它可以跨越页面刷新而存在——适用于仅针对会话的小段数据的存储（）
? 2. globalStorage：跨越会话存储数据，但要指定哪些域可以访问
// 保存只能www.wrox.com域下才能访问的name 类似于Ajax的同源策咯globalStorage["www.wrox.com"].name="Nichoas";
3. localStorage 取代了globalStorage：不能给localStorage 指定任何访问规则。要访问同一个localStorage ，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上，相当于 globalStorage[location.host] -事先不能确定域名时用
? 4. storage事件：任何对storage对象进行修改，都会触发storage事件，这个事件的event有以下属性
document.addEventListener("storage",function(event){alert(event.domain);},false); a. domain：域名改变
????? b. key ?删除、设置键名
????? c. newValue ?设置值
????? d. oldValue
? 5. 限制：localStorage而言，大多数浏览器是5MB限制，Chrome对每个来源的限制是2.5MB；对于sessionStorage 因浏览器而异 ?一般是2.5MB
? 6. IndexedDB——indexed database API ?是浏览器中保存结构化数据的一种数据库（使用对象保存数据）http://www.zhangxinxu.com/wordpress/2017/07/html5-indexeddb-js-example/
var request,database,db;request=indexedDB.open(‘admin‘);request.onerror=function(event){alert(‘something bad happened while trying to open‘+event.target.errorCode);};request.onsuccess=function(event){database=event.target.result; db=database;};
????? a. 设计操作是异步的，大多数操作以请求的方式进行有onerror和onsuccess事件处理程序
????? b. 一开始为indexedDB指定版本号——setVersion（）方法
????? c. 对象存储空间：（需要把对象里面的一个唯一属性作为键） //创建一个键为username的名字是users的存储空间 ?????add（）/ push（）添加 ?/更新数据
var store=db.createObjectStore("users",{keyPath:"username"}); d. 查询数据：var transaction=db.transaction();
????? e. 游标查询：游标是指向结果集的指针。在存储空间上调用openCursor（）
????????????? 1. 键的范围4中方法：only（） ??lowerBound（） ?upBound（） bound（）
????????????? 2. 设定游标的方向（可选的第二个参数）
????? f. 索引：一个对象存储空间指定多个键，将ID作为主键。创建主键：
var store=db.transaction("users").objectStore("users");var index=store.createIndex("username","username",{unique:false});//设置索引值var index=store.index("username");//获取索引值g. 并发问题：indexedDB虽然是异步的 但还是有并发操作问题，（浏览器两个不同的标签页打开了同一个页面）就要指定版本号setVersion（），指定onversionchange事件处理程序，立即关闭
// 并发处理var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;var request=indexedDB.open("admin");request.onsuccess=function(event){var database=event.target.result;database.onversionchange=function(){database.close();};}; h，限制：indexedDB只能由同源（相同的协议，域和端口）占用磁盘空间有限制，chrome限制5M
JS中离线应用与客户端存储
原文地址：http://www.cnblogs.com/sundjly/p/7898939.html