1.離線檢測：H5定義了navigator.online屬性，為true 表示設備能上網
還定義了兩個相關事件：online和offline

2 數據存儲

1. cookie——HTTP coolie，客戶端存儲會話信息的。該標準要求服務器對任意的HTTP請求發送Set-Cookie HTTP頭作為響應的一部分‘

/* 
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value;expire=expiration_time;path=domain_path;secure
Other-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);
}
},
// 刪除整個cookie
unsetAll: 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中離線應用與客戶端存儲