23-离线应用与客户端存储 - 《「Javascript高级程序设计」第三版快速解读》

离线检测
应用缓存
数据存储

保持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用，就是在设备不能上网的情况下仍然可以运行的应用。

开发离线 Web 应用需要几个步骤。首先是确保应用知道设备是否能上网，以便下一步执行正确的操作。然后，应用还必须能访问一定的资源（图像、JavaScript、CSS 等），只有这样才能正常工作。最后，必须有一块本地空间用于保存数据，无论能否上网都不妨碍读写。HTML5 及其相关的 API 让开发离线应用成为现实。

离线检测

HTML5提供了这个API检测设备是否离线:

var isOn = navigator.onLine;    // true or false

除 navigator.onLine 属性之外，为了更好地确定网络是否可用，HTML5 还定义了两个事件：online 和 offline。当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件。这两个事件在 window 对象上触发。

// 只有网络状况发生变化的时候才会触发以下事件
windw.addEventListener("online", function(){ 
  console.log("Online");
});
windw.addEventListener("offline", function(){ 
  console.log("Offline");
}

应用缓存

看这篇文章能够更清晰了解html5 appcache

数据存储

Cookie

Cookie最初是用来在客户端储存会话信息的。该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为相应的一部分，其中包含会话的信息。例如：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

这里就设置了一个以name为名称，value为值的一个cookie。
浏览器会储存这样的会话信息。并在这之后通过为每一个请求添加Cookie HTTP头部将信息发送回服务器：

GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

这个信息对于服务器来说就可以唯一验证请求的身份

限制
cookie在性质上是绑定在特定域名下的。当设定了一个cookie，再给创建它的域名发送请求时都会包含这个cookie，而发向其他域的请求中并不会包含这个cookie。这个限制保证了cookie只能让批准的接受者访问。
每个域的cookie总数是有限的，各浏览器不同，最小的规定一个域有30个cookie，大小一般不超过4095B。
cookie的构成
cookie由浏览器保存的一下几块信息构成：

名称：一个唯一确定cookie的名称
值：储存在cookie中的字符串值
域：这个cookie对哪个域有效，如果这个域包含子域，那对子域同样有有效。如果设定是没有明确指定，这个值会被认为是设置cookie的那个域
路径：用于指定向域中的哪个路径发送cookie，例如，你可以指定cookie只发送到www.baidu.com/img，那再访问www.baidu.com时就不会发送cookie。及时它们同域
失效时间：cookie应该被删除的时间戳，默认浏览器会话结束就删除
安全标志：指定后，cookie只有在使用SSL连接时才会发送到服务器

看例子:

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

JS中的cookie
可以通过document.cookie返回如下格式的字符串:

document.cookie;    //name1=value1;name2=value2;name3=value3

js中设置删除cookie不是很好操作, 我给出一个封装好的demo:

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";
    }
    document.cookie = cookieText;
  },
  unset: function (name, path, domain, secure){
    this.set(name, "", new Date(0), path, domain, secure);
  }
};
CookieUtil.set("book", "Professional JavaScript");
console.log(CookieUtil.get("book"));
CookieUtil.unset("book");
console.log(CookieUtil.get("book"));

子Cookie
子Cookie方案的提出实际上是为了避免单域名对cookie个数的限制, 它的思想就是在单个cookie中存更多的名值对, 不过写这个笔记的时候, 市场上的主流是现代浏览器(谷歌内核), 没有单域名cookie个数限制, 这里不再讲解.

关于Cookie的一些说明

cookie存储的数据不宜过多: 信息越多, 后端响应越慢
不要存敏感信息, 否则XSS泄露麻烦

IE用户数据

略, 不要用

Web存储机制

目前来说主要是localStorage和sessionStorage. 书中有些内容以及不适合现在, 看这个例子更简洁

IndexDB/WebSQL

书上只介绍了indexDB , 我们看这篇文章 , 更加直观介绍两种方案.