客户端数据存储----Cookie From 《高程3》

时间 2019-12-08

原文原文链接

前言

本篇主要介绍Cookie技术的读书总结，可是我认为逻辑上最好会和Web Storage技术放在一块儿进行对比，所以后续会再总结一篇关于WEB存储的姊妹总结，敬请期待。html

首先先来一段总结：Cookie用于本地数据存储，出如今服务器和浏览器交互的响应Set-Cookie头部和请求Cookie头部中，受到单域名下Cookie的数量、单个Cookie大小、性能、安全限制。子Cookie技术的出现缓解了单域名下Cookie的数量限制，关于子Cookie有一整套工具函数可使用。apache

HTTP Cookie 简介

用户的信息最好存储在客户端上，这就对客户端数据存储提出了要求。最先的解决方式就是Cookie。HTTP Cookie，一般直接叫作 cookie，最初是在客户端用于存储会话信息的。该标准要求服务器对任意 HTTP 请求发送 Set-Cookie HTTP 头做为响应的一部分，其中包含会话信息。数组

一个典型的响应头部：浏览器

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

这个 HTTP 响应设置以 name 为名称、以 value 为值的一个 cookie，名称和值在传送时都必须是URL 编码的。浏览器会存储这样的会话信息，并在这以后，经过为每一个请求添加 Cookie 头将信息发送回服务器：安全

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

Cookie的访问、数量和大小限制

cookie 在性质上是绑定在特定的域名下的。当设定了一个 cookie 后，再给建立它的域名发送请求时，都会包含这个 cookie。这个限制确保了储存在 cookie 中的信息只能让批准的接受者访问，而没法被其余域访问。服务器

因为 cookie 是存在客户端计算机上的，还加入了一些限制确保 cookie 不会被恶意使用，同时不会占据太多磁盘空间。每一个域的 cookie 总数是有限的，不过浏览器之间各有不一样：
1）IE6 以及更低版本限制每一个域名最多 20 个 cookie。
2）IE7 和以后版本每一个域名最多 50 个。 IE7 最初是支持每一个域名最大 20 个 cookie，以后被微软的一个补丁所更新。
3）Firefox 限制每一个域最多 50 个 cookie。
4）Opera 限制每一个域最多 30 个 cookie。
5）Safari 和 Chrome 对于每一个域的 cookie 数量限制没有硬性规定。cookie

当超过单个域名限制以后还要再设置 cookie，浏览器就会清除之前设置的 cookie。 IE 和 Opera 会删除最近最少使用过的（LRU， Least Recently Used） cookie，腾出空间给新设置的 cookie。 Firefox 看上去好像是随机决定要清除哪一个 cookie，因此考虑 cookie 限制很是重要，以避免出现不可预期的后果。dom

浏览器中对于 cookie 的尺寸也有限制。大多数浏览器都有大约 4096B（加减 1）的长度限制。为了最佳的浏览器兼容性，最好将整个 cookie 长度限制在 4095B（含 4095）之内。尺寸限制影响到一个域下全部的 cookie，而并不是每一个 cookie 单独限制。若是你尝试建立超过最大尺寸限制的 cookie，那么该 cookie 会被悄无声息地丢掉。函数

cookie 的构成

1）名称：一个惟一肯定 cookie 的名称。cookie 名称是不区分大小写的。cookie 的名称必须是通过 URL 编码的。
2）值：储存在 cookie 中的字符串值。值必须被 URL 编码。
3）域： cookie 对于哪一个域是有效的。全部向该域发送的请求中都会包含这个 cookie 信息。
4）路径：对于指定域中的那个路径，应该向服务器发送 cookie。
5）失效时间：表示 cookie 什么时候应该被删除的时间戳（也就是，什么时候应该中止向服务器发送这个cookie）。默认状况下，浏览器会话结束时即将全部 cookie 删除；不过也能够本身设置删除时间。这个值是个 GMT 格式的日期（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定应该删除cookie 的准确时间。所以， cookie 可在浏览器关闭后依然保存在用户的机器上。若是你设置的失效日期是个之前的时间，则 cookie 会被马上删除。
6）安全标志：指定后， cookie 只有在使用 SSL 链接的时候才发送到服务器。例如， cookie 信息只能发送给 https://www.wrox.com，而 http://www.wrox.com 的请求则不能发送 cookie。工具

每一段信息都做为 Set-Cookie 头的一部分，使用分号加空格分隔每一段。secure 标志是 cookie 中惟一一个非名值对儿的部分，直接包含一个 secure 单词。尤为要注意，域、路径、失效时间和 secure 标志都是服务器给浏览器的指示（是从服务器发回的响应），以指定什么时候应该发送 cookie。这些参数并不会做为发送到服务器的 cookie 信息的一部分，只有名值对儿才会被发送到服务器。

设置 cookie 的格式以下，和 Set-Cookie 头中使用的格式同样，以下：
name=value; expires=expiration_time; path=domain_path;
domain=domain_name; secure

建立、删除和访问Cookie的工具函数

因为 JavaScript 中读写 cookie 不是很是直观，经常须要写一些函数来简化 cookie 的功能。基本的cookie 操做有三种：读取、写入和删除。建立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) { //secure在这里是布尔值
      cookieText += '; secure';
    }
    document.cookie = cookieText;
  },
  unset: function (name, path, domain, secure) {
    this.set(name, '', new Date(0), path, domain, secure);
  }

};

CookieUtil.get()方法根据 cookie 的名字获取相应的值。它会在 document.cookie 字符串中查找 cookie 名加上等于号的位置。若是找到了，那么使用 indexOf()查找该位置以后的第一个分号（表示了该 cookie 的结束位置）。若是没有找到分号，则表示该 cookie 是字符串中的最后一个，则余下的字符串都是 cookie 的值。该值使用 decodeURIComponent()进行解码并最后返回。若是没有发现 cookie，则返回 null。
CookieUtil.set()方法在页面上设置一个 cookie，接收以下几个参数： cookie 的名称， cookie 的值，可选的用于指定 cookie 什么时候应被删除的 Date 对象， cookie 的可选的 URL 路径，可选的域，以及可选的表示是否要添加 secure 标志的布尔值。参数是按照它们的使用频率排列的，只有头两个是必需的。在这个方法中，名称和值都使用encodeURIComponent()进行了URL编码，并检查其余选项。若是expires参数是 Date 对象，那么会使用 Date 对象的 toGMTString()方法正确格式化 Date 对象，并添加到expires 选项上。方法的其余部分就是构造 cookie 字符串并将其设置到 document.cookie 中。
没有删除已有 cookie 的直接方法。因此，须要使用相同的路径、域和安全选项再次设置 cookie，并将失效时间设置为过去的时间。 CookieUtil.unset()方法能够处理这种事情。它接收 4 个参数：要删除的 cookie 的名称、可选的路径参数、可选的域参数和可选的安全参数。这些参数加上空字符串并设置失效时间为 1970 年 1 月 1 日（初始化为 0ms 的 Date 对象的值），传给 CookieUtil.set()。这样就能确保删除 cookie。

FireBug测试结果

FireBug对应哪一个页面，设置的cookie就存储在那个页面对应的域。打开本地apache服务器的/localhost/alien/页面，在其中打开firebug。
测试实例1：

CookieUtil.set("name", "Nicholas");
    CookieUtil.set("book", "Professional JavaScript");
    //读取 cookie 的值
    console.log(CookieUtil.get("name")); //"Nicholas"
    console.log(CookieUtil.get("book")); //"Professional JavaScript"

测试实例2 删除cookie：
CookieUtil.unset("name");
CookieUtil.unset("book");
此时FireBug中不显示任何Cookie。

测试实例3 打开本地服务器localhost主页，设置安全的cookie。
CookieUtil.set("name","Nicholas", null, null, null, true);
console.log(CookieUtil.get("name"));
设置secure为true时，前面缺乏的参数都定义为null。这是由于JavaScript会按照顺序对应参数。

测试结果：安全项显示“安全”。

子Cookie

子Cookie的目的是为了突破单域名下的Cookie数量限制，也就是在一个Cookie中存储多个名值对，常见格式以下：
name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

关于子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) {
      //因为采用push方法，新的子Cookie被延续到原来的Cookie中
      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);
  }
};

如下是对上述方法的解析：
获取子 cookie 的方法有两个： get()和 getAll()。其中 get()获取单个子 cookie 的值， getAll()获取全部子 cookie 并将它们放入一个对象中返回，对象的属性为子 cookie 的名称，对应值为子 cookie对应的值。 get()方法接收两个参数： cookie 的名字和子 cookie 的名字。它其实就是调用 getAll()获取全部的子 cookie，而后只返回所需的那一个（若是 cookie 不存在则返回 null）。

SubCookieUtil.getAll()方法和 CookieUtil.get()在解析 cookie 值的方式上很是类似。区别在于 cookie 的值并不是当即解码，而是先根据&字符将子 cookie 分割出来放在一个数组中，每个子 cookie再根据等于号分割，这样在 parts 数组中的前一部分即是子 cookie 名，后一部分则是子 cookie 的值。这两个项目都要使用 decodeURIComponent()来解码，而后放入 result 对象中，最后做为方法的返回值。若是 cookie 不存在，则返回 null。

set()方法接收 7 个参数： cookie 名称、子 cookie 名称、子 cookie 值、可选的 cookie 失效日期或时间的 Date 对象、可选的 cookie 路径、可选的 cookie 域和可选的布尔 secure 标志。全部的可选参数都是做用于 cookie自己而非子 cookie。为了在同一个 cookie中存储多个子 cookie，路径、域和 secure标志必须一致；针对整个 cookie 的失效日期则能够在任何一个单独的子 cookie 写入的时候同时设置。在这个方法中，第一步是获取指定 cookie 名称对应的全部子 cookie。逻辑或操做符“ ||”用于当 getAll()返回 null 时将 subcookies 设置为一个新对象。而后，在 subcookies 对象上设置好子 cookie 值并传给setAll()。

setAll()方法接收 6 个参数： cookie 名称、包含全部子 cookie 的对象以及和 set()中同样的 4个可选参数。这个方法使用 for-in 循环遍历第二个参数中的属性。为了确保确实是要保存的数据，使用了 hasOwnProperty()方法，来确保只有实例属性被序列化到子 cookie 中。因为可能会存在属性名为空字符串的状况，因此在把属性名加入结果对象以前还要检查一下属性名的长度。将每一个子 cookie的名值对儿都存入 subcookieParts 数组中，以便稍后可使用 join()方法以&号组合起来。

普通 cookie 能够经过将失效时间设置为过去的时间的方法来删除，可是子 cookie 不能这样作。为了删除一个子 cookie，首先必须获取包含在某个 cookie中的全部子 cookie，而后仅删除须要删除的那个子 cookie，而后再将余下的子 cookie 的值保存为 cookie的值。unset()方法用于删除某个 cookie 中的单个子 cookie而不影响其余的；而 unsetAll()方法则等同于 CookieUtil.unset()，用于删除整个 cookie。和 set()及 setAll()同样，路径、域和 secure 标志必须和以前建立的 cookie 包含的内容一致。

firebug测试实例

//设置两个 cookie
SubCookieUtil.set("data", "name", "Nicholas");
SubCookieUtil.set("data", "book", "Professional JavaScript");

//设置所有子 cookie 和失效日期
SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" },new Date("January 1, 2018"));

//修更名字的值，并修改 cookie 的失效日期
SubCookieUtil.set("data", "name", "Michael", new Date("February 1, 2010"));

//删除全部子Cookie
SubCookieUtil.unsetAll('data');

Cookie的限制

1）单域名下数目限制和大小限制：子Cookie只是突破了单个域名下Cookie数目限制，可是Cookie的大小依旧受限，所以要注意子Cookie的大小不能使单个Cookie超出大小限制。2）性能限制：因为全部的 cookie 都会由浏览器做为请求头发送，因此在 cookie 中存储大量信息会影响到特定域的请求性能。 cookie 信息越大，完成对服务器请求的时间也就越长。尽管浏览器对 cookie 进行了大小限制，不过最好仍是尽量在 cookie 中少存储信息，以免影响性能。3）安全限制：cookie 数据并不是存储在一个安全环境中，其中包含的任何数据均可以被他人访问。因此不要在 cookie 中存储诸如信用卡号或者我的地址之类的数据。cookie 的性质和它的局限使得其并不能做为存储大量信息的理想手段，因此又出现了其余方法。