数据存储

一、离线检测

navigator.onLine属性，这个属性为true表示可以上网，值为false表示设备离线

 document.write(navigator.onLine?"online":offline)

除了navigator.onLine属性之外，还有两个事件，online和offline

二、应用缓存

三、数据存储

3.1、Cookie

HTTP Cookie，最初是在客户端用于存储会话信息的

3.1.1、限制

针对不同的浏览器，cookie大小有不同的限制

3.1.2、cookie的构成

HTTP/1.1 200 OK
Content-type：text/html
Set-Cookie：name-value；expires=Mon，22-Jan-07 07：10：24 GMT；domin=.wrox.com
other-header:other-header-value该信息制定列一个叫做name的cookie，它会在格林威治时间2007年1月22日7：10：24失效，同时对于www.wrox.com和wrox.com任何子域（p2p.wrox.com)都有效

3.3.3、Javascript和Cookie

document.cookie来获取页面的cookie
也可以用来设置cookie

var CookieUtil={    
get: function (name){        
var cookieName = encodeURIComponent(name) + "=",            
cookieStart = document.cookie.indexOf(cookieName),            
cookieValue = null,            cookieEnd;                    
if (cookieStart > -1){            
cookieEnd = document.cookie.indexOf(";", cookieStart);            
if (cookieEnd == -1){                
cookieEnd = document.cookie.length;
}            
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));        
} 
return cookieValue;    
 function (name, value, expires, path, domain, secure) {        
 var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);            if (expires instanceof Date) {            
 cookieText += "; expires=" + expires.toGMTString();        
 }            
 if (path) {            
 cookieText += "; path=" + path;        
 }            
 if (domain) {            
 cookieText += "; domain=" + domain;        
 }            
if (secure) {            
cookieText += "; secure";        
}            
document.cookie = cookieText;    
},       
 unset: function (name, path, domain, secure){        
 this.set(name, "", new Date(0), path, domain, secure);    
 }
 }

3.3.4、子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 = null,            
cookieEnd,            
subCookies,           
 i,            
 parts,            
 result = {};                   
  if (cookieStart > -1){            
  cookieEnd = document.cookie.indexOf(";", cookieStart)            
  if (cookieEnd == -1){                
  cookieEnd = document.cookie.length;            }            
  cookieValue = document.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) || {};        
subcookies[subName] = value;        
this.setAll(name, subcookies, expires, path, domain, secure);
},        
setAll: function(name, subcookies, expires, path, domain, secure){            
var cookieText = encodeURIComponent(name) + "=",            
subcookieParts = new Array(),            
subName;                
for (subName in subcookies){            
if (subName.length > 0 && subcookies.hasOwnProperty(subName)){                
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 (domain) {                
 cookieText += "; domain=" + domain;            }                    
 if (secure) {                
 cookieText += "; secure";            
 }        
 } else {            
 cookieText += "; expires=" + (new Date(0)).toGMTString();        
 }            
 document.cookie = cookieText;               
  },       
   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);       
     }   
      },        
      unsetAll: function(name, path, domain, secure){        
      this.setAll(name, null, new Date(0), path, domain, secure);    
      }
};

3.2、web存储机制

3.2.1、Storage

clear（）
getItem（name），setItem（name，value），remobeItem（name）
key（index）

3.2.2、sessionStorage对象

和cookie一样，该数据只会保留到浏览器关闭
可以使用key（）来迭代sessionStorage中的值

  for (i=0, len = sessionStorage.length; i < len; i++){                    
  key = sessionStorage.key(i);                    
  console.log(key)                    
  value = sessionStorage.getItem(key);                    
  alert(key + "=" + value);                
  }           

也可以通过for-in

 for(var key in sessionStorage){                    
 var value=sessionStorage.getItem(key);                   
  console.log(key+"="+value)                
  }    

3.2.3、globleStorage对象(尽量不要使用）

globalStorage也是Storage的实例，这个对象的目的是跨域会话存储，但是它有一个限制，就是在使用之前必须先指定哪些域可以访问，通过方括号标记属性来实现，如下例子所示：

//获取数据
 globalStorage["wrox.com"].name="Nicholas"
  globalStorage["wrox.com"].setItem("name"，"Nicholas")
 //读取数据
globalStorage["wrox.con"].name
 globalStorage["wrox.com"].getItem("name")

3.2.4、localStorage对象

可以持久的保存数据，要访问一个globalStorage对象，页面必须来自同一域名（子域名无效），使用同一种协议，在同一个端口
也使用setItem和getItem方法

3.2.5、storage事件

3.2.6、限制