啥是cookie岖赋？

cookie是一小段文本信息，伴隨著用戶請求在web服務(wù)器和瀏覽器之間傳遞
用于解決 "如何記錄客戶端的用戶信息"

cookie存在哪里？

cookie 是存在用戶硬盤中，用戶每次訪問站點時泡嘴，Web應(yīng)用程序都可以讀取 Cookie 包含的信息。當用戶再次訪問這個站點時锐涯，瀏覽器就會在本地硬盤上查找與該 URL 相關(guān)聯(lián)的 Cookie磕诊。如果該 Cookie 存在，瀏覽器就將它添加到request header的Cookie字段中纹腌，與http請求一起發(fā)送到該站點霎终。

cookie如何添加？

• 客戶端設(shè)置：js提供api -- document.cookie
  ??注意：document.cookiecookie的名和值中不能出現(xiàn)分號升薯、逗號莱褒、等號和空格，每一個key之間通過分號和空格來分割涎劈。

document.cookie = 'name=value; maxAge=3000; path=/; domain=xx.com; secure'

設(shè)置多個cookie
通過document.cookie的方式設(shè)置cookie每次只能設(shè)置一個广凸，寫多個會如何呢？

document.cookie = 'cookie1=value1; cookie2=value2'

嘗試一下蛛枚，會發(fā)現(xiàn)只有第一個cookie1設(shè)置成功谅海，cookie2被無視，因此設(shè)置多個cookie蹦浦，最簡單就是多次調(diào)用document.cookie

• 服務(wù)端設(shè)置：http響應(yīng)頭
  瀏覽器發(fā)出的有些請求返回頭中有Set-Cookie的字段扭吁，服務(wù)器通過這個字段告知瀏覽器它需要設(shè)置的cookie，然后瀏覽器檢查一下設(shè)置的內(nèi)容是否符合瀏覽器對cookie的要求盲镶，符合條件則設(shè)置成功
  ??注意：響應(yīng)頭里set-cookie字段可以有多個侥袜，每一個對應(yīng)一個要設(shè)置的cookie，且只能對應(yīng)一個溉贿。

示例

cookie如何獲确惆伞？

• 客戶端主動獲取
  同樣是js提供的api -- document.cookie

 var cookies = document.cookie

• 請求頭中攜帶
  瀏覽器發(fā)送請求時宇色，在請求的頭中會自動將“符合條件”的cookie帶上九杂。
  既然是請求頭中攜帶的，那么我們通過ajax發(fā)送請求的時候宣蠕，能否順便設(shè)置一下cookie呢例隆？

  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.withCredentials = true;
  xhr.setRequestHeader('Cookie', "key=value");
  xhr.send(null);

xhr.withCredentials:

一般跨域請求的時候，比如A域接收B域的請求時植影，接收不到B域的cookies裳擎，也就是說，A服務(wù)器的request.getCookies() 為空思币。解決這個問題鹿响，一般把XMLHttpRequest這個對象的withCredentials屬性設(shè)置為true

實驗一下可以發(fā)現(xiàn)，我們設(shè)置的cookie并沒有生效谷饿，并且chrome瀏覽器下我們會看到一行報錯

Refused to set unsafe header "Cookie"

因為瀏覽器的安全限制惶我，我們不能自己隨便設(shè)置請求頭中的cookie。

cookie有哪些屬性博投？

對于domain值的要求

• 自身：domain的值可以設(shè)置為本身。
• 向下：所有子域名

如果當前頁面的域名是 sub.test.com, 那么 domain 可以設(shè)置為.sub.test.com丛版。允許所有sub.test.com的子域名訪問巩掺，如xx.sub.test.com、xx.xx.sub.test.com页畦。

• 向上：父級域名,直到頂級域名的下一級

如果當前頁面的域名是sub.test.com, 那么domain可以設(shè)置為test.com胖替。但是不能設(shè)置為.com。因為.com屬于Top-Level Domain豫缨。

cookie的缺點独令？

• 安全性弱：由于cookie在http中是明文傳遞的，其中包含的數(shù)據(jù)都可以被他人訪問好芭，可能會被篡改燃箭、盜用。
• 大小限制：cookie的大小限制在4kb左右舍败，不適合大量存儲招狸。
• 增加流量：cookie每次請求都會被自動添加到Request Header中敬拓，無形中增加了流量。cookie信息越大裙戏，對服務(wù)器請求的時間越長乘凸。

cookie插件

tiny-cookie(vue-cookie)

/*!
 * tiny-cookie - A tiny cookie manipulation plugin
 * https://github.com/Alex1990/tiny-cookie
 * Under the MIT license | (c) Alex Chao
 */

!(function(root, factory) {

  // Uses CommonJS, AMD or browser global to create a jQuery plugin.
  // See: https://github.com/umdjs/umd
  if (typeof define === 'function' && define.amd) {
    // Expose this plugin as an AMD module. Register an anonymous module.
    define(factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS module
    module.exports = factory();
  } else {
    // Browser globals 
    root.Cookie = factory();
  }

}(this, function() {

  'use strict';

  // The public function which can get/set/remove cookie.
  function Cookie(key, value, opts) {
    if (value === void 0) {
      return Cookie.get(key);
    } else if (value === null) {
      Cookie.remove(key);
    } else {
      Cookie.set(key, value, opts);
    }
  }

  // 檢查是否啟用了cookie
  Cookie.enabled = function() {
    var key = '__test_key';
    var enabled;

    document.cookie = key + '=1';
    enabled = !!document.cookie;

    if (enabled) Cookie.remove(key);

    return enabled;
  };

  // 根據(jù)key名得到cookie的值
  Cookie.get = function(key, raw) {
    if (typeof key !== 'string' || !key) return null;

    key = '(?:^|; )' + escapeRe(key) + '(?:=([^;]*?))?(?:;|$)';

    var reKey = new RegExp(key);
    var res = reKey.exec(document.cookie);

    return res !== null ? (raw ? res[1] : decodeURIComponent(res[1])) : null;
  };

  // 在不解碼的情況下獲取cookie的值。
  Cookie.getRaw = function(key) {
    return Cookie.get(key, true);
  };

  // 設(shè)置cookie的值
  Cookie.set = function(key, value, raw, opts) {
    if (raw !== true) {
      opts = raw;
      raw = false;
    }
    opts = opts ? convert(opts) : convert({});
    var cookie = key + '=' + (raw ? value : encodeURIComponent(value)) + opts;
    document.cookie = cookie;
  };

  // 在不編碼的情況下設(shè)置cookie的值
  Cookie.setRaw = function(key, value, opts) {
    Cookie.set(key, value, true, opts);
  };

  // 用指定的鍵刪除cookie
  Cookie.remove = function(key) {
    Cookie.set(key, 'a', { expires: new Date() });
  };

  // 工具函數(shù)
  // ---------------

  // 轉(zhuǎn)義特殊字符
  function escapeRe(str) {
    return str.replace(/[.*+?^$|[\](){}\\-]/g, '\\$&');
  }

  // 將對象轉(zhuǎn)換為cookie選項字符串挽懦。
  function convert(opts) {
    var res = '';

    for (var p in opts) {
      if (opts.hasOwnProperty(p)) {

        if (p === 'expires') {
          var expires = opts[p];
          if (typeof expires !== 'object') {
            expires += typeof expires === 'number' ? 'D' : '';
            expires = computeExpires(expires);
          }
          opts[p] = expires.toUTCString(); // 可根據(jù)世界時 (UTC) 把 Date 對象轉(zhuǎn)換為字符串
        }

        if (p === 'secure') {
          if (opts[p]) {
            res += ';' + p;
          }

          continue;
        }

        res += ';' + p + '=' + opts[p];
      }
    }

    if (!opts.hasOwnProperty('path')) {
      res += ';path=/';
    }

    return res;
  }

  // 按給定字符串返回expires
  function computeExpires(str) {
    var expires = new Date();
    var lastCh = str.charAt(str.length - 1);
    var value = parseInt(str, 10);

    switch (lastCh) {
      case 'Y': expires.setFullYear(expires.getFullYear() + value); break;
      case 'M': expires.setMonth(expires.getMonth() + value); break;
      case 'D': expires.setDate(expires.getDate() + value); break;
      case 'h': expires.setHours(expires.getHours() + value); break;
      case 'm': expires.setMinutes(expires.getMinutes() + value); break;
      case 's': expires.setSeconds(expires.getSeconds() + value); break;
      default: expires = new Date(str);
    }

    return expires;
  }

  return Cookie;

}));