9.离线与客户端存储

离线检测

if(navigator.onLine){
//正常工作
}else{
//离线操作

}

应用缓存

cookie

var CookieUtil = {

  get:function(name){
      var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;

      if(cookieStart > -1){
          var cookieEnd = document.cookie.indexOf(";",cookieStart);
          if(cookieEnd == -1){
              cookieEnd = document.cookie.length;
          }
          cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length,cookieEnd));

      }
      return cookieValue;
  },

  set: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=" + secure;
    }

    document.cookie = cookieText;
  },

  unset:function(name,path,domain,secure){
      this.set(name,"",new Date(0),path,domain,secure);
  }

}

//设置cookie

CookieUtil.set("name","Linshui");
CookieUtil.set("test","testing");

//读取cookie值

console.log(CookieUtil.get("name"));
console.log(CookieUtil.get("book"));

//删除cookie

CookieUtil.unset("name");
console.log(CookieUtil.get("name"));

//设置cookie 包括它的路径，域，失效日期

CookieUtil.set("Zhaoying","Linshui","/lin","www.haoqiao.me",new Date("January 1 ,2017"));

console.log((CookieUtil.get("Zhaoying")));

sessionStorage

存储特定于某个会话的数据.可以跨页面刷新而存在，浏览器关闭后消失。绑定于某个服务区会话。因此在本地运行时不可用

sessionStorage.setItem("name","test");

sessionStorage.book = "hi";

localStorage

持续保持客户端数据。一般客户端储存选择这个。

IndexedDB

保持结构化数据的一种数据库

在不同浏览器中命名不一样，因此使用之前因加这句：

var indexedDB = window.indexedDB ||  window.msindexedDB ||  window.mozindexedDB ||  window.webkitindexedDB;