好好了解一下Cookie(強烈推薦)

好好了解一下Cookie(強烈推薦)

http://www.jb51.net/article/86598.htm?pc

Cookie是由服務器端生成，發送給User-Agent,瀏覽器會將Cookie的key/value保存到某個目錄下的文本文件內，下次請求同一網站時就發送該Cookie給服務器,對cookie知識感興趣的朋友一塊兒學習吧

Cookie的誕生

因爲HTTP協議是無狀態的，而服務器端的業務必須是要有狀態的。Cookie誕生的最初目的是爲了存儲web中的狀態信息，以方便服務器端使用。好比判斷用戶是不是第一次訪問網站。目前最新的規範是RFC 6265，它是一個由瀏覽器服務器共同協做實現的規範。

Cookie的處理分爲：

服務器像客戶端發送cookie

瀏覽器將cookie保存

以後每次http請求瀏覽器都會將cookie發送給服務器端

服務器端的發送與解析

發送cookie

服務器端像客戶端發送Cookie是經過HTTP響應報文實現的，在Set-Cookie中設置須要像客戶端發送的cookie，cookie格式以下：

Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure"
其中name=value是必選項，其它都是可選項。Cookie的主要構成以下：

name:一個惟一肯定的cookie名稱。一般來說cookie的名稱是不區分大小寫的。

value:存儲在cookie中的字符串值。最好爲cookie的name和value進行url編碼

domain:cookie對於哪一個域是有效的。全部向該域發送的請求中都會包含這個cookie信息。這個值能夠包含子域(如：

yq.aliyun.com)，也能夠不包含它(如：.aliyun.com，則對於aliyun.com的全部子域都有效).

path: 表示這個cookie影響到的路徑，瀏覽器跟會根據這項配置，像指定域中匹配的路徑發送cookie。

expires:失效時間，表示cookie什麼時候應該被刪除的時間戳(也就是，什麼時候應該中止向服務器發送這個cookie)。若是不設置這個時間戳，瀏覽器會在頁面關閉時即將刪除全部cookie；不過也能夠本身設置刪除時間。這個值是GMT時間格式，若是客戶端和服務器端時間不一致，使用expires就會存在誤差。

max-age: 與expires做用相同，用來告訴瀏覽器此cookie多久過時（單位是秒），而不是一個固定的時間點。正常狀況下，max-age的優先級高於expires。

HttpOnly: 告知瀏覽器不容許經過腳本document.cookie去更改這個值，一樣這個值在document.cookie中也不可見。但在http請求張仍然會攜帶這個cookie。注意這個值雖然在腳本中不可獲取，但仍然在瀏覽器安裝目錄中以文件形式存在。這項設置一般在服務器端設置。

secure: 安全標誌，指定後，只有在使用SSL連接時候才能發送到服務器，若是是http連接則不會傳遞該信息。就算設置了secure 屬性也並不表明他人不能看到你機器本地保存的 cookie 信息，因此不要把重要信息放cookie就對了服務器端設置

cookie示例以下：

?

1 2 3 4 5 6 7 8 9

var http = require('http'); var fs = require('fs'); http.createServer(function(req, res) {   res.setHeader('status', '200 OK');   res.setHeader('Set-Cookie', 'isVisit=true;domain=.yourdomain.com;path=/;max-age=1000');   res.write('Hello World');   res.end(); }).listen(8888); console.log('running localhost:8888')

直接設置Set-Cookie過於原始，咱們能夠對cookie的設置過程作以下封裝：

var serilize = function(name, val, options) {

  if (!name) {

    throw new Error("coolie must have name");

  }

  var enc = encodeURIComponent;

  var parts = [];

   

  val = (val !== null && val !== undefined) ? val.toString() : "";

  options = options || {};

  parts.push(enc(name) + "=" + enc(val));

  // domain中必須包含兩個點號

  if (options.domain) {

    parts.push("domain=" + options.domain);

  }

  if (options.path) {

    parts.push("path=" + options.path);

  }

  // 若是不設置expires和max-age瀏覽器會在頁面關閉時清空cookie

  if (options.expires) {

    parts.push("expires=" + options.expires.toGMTString());

  }

  if (options.maxAge && typeof options.maxAge === "number") {

    parts.push("max-age=" + options.maxAge);

  }

  if (options.httpOnly) {

    parts.push("HTTPOnly");

  }

  if (options.secure) {

    parts.push("secure");

  }

   

  return parts.join(";");

}

須要注意的是，若是給cookie設置一個過去的時間，瀏覽器會當即刪除該cookie；此外domain項必須有兩個點，所以不能設置爲localhost:

something that wasn't made clear to me here and totally confused me for a while was that domain names must contain at least two dots (.),hence 'localhost' is invalid and the browser will refuse to set the cookie!

服務器端解析cookie

cookie能夠設置不一樣的域與路徑，因此對於同一個name value，在不一樣域不一樣路徑下是能夠重複的，瀏覽器會按照與當前請求url或頁面地址最佳匹配的順序來排定前後順序

因此當前端傳遞到服務器端的cookie有多個重複name value時，咱們只須要最匹配的那個，也就是第一個。服務器端解析代碼以下：

var parse = function(cstr) {

  if (!cstr) {

    return null;

  }

   

  var dec = decodeURIComponent;

  var cookies = {};

  var parts = cstr.split(/\s*;\s*/g);

  parts.forEach(function(p){

    var pos = p.indexOf('=');

    // name 與value存入cookie以前，必須通過編碼

    var name = pos > -1 ? dec(p.substr(0, pos)) : p;

    var val = pos > -1 ? dec(p.substr(pos + 1)) : null;

    //只須要拿到最匹配的那個

    if (!cookies.hasOwnProperty(name)) {

      cookies[name] = val;

    }/* else if (!cookies[name] instanceof Array) {

      cookies[name] = [cookies[name]].push(val);

    } else {

      cookies[name].push(val);

    }*/

  });

   

  return cookies;

}

客戶端的存取

瀏覽器將後臺傳遞過來的cookie進行管理，而且容許開發者在JavaScript中使用document.cookie來存取cookie。可是這個接口使用起來很是蹩腳。它會由於使用它的方式不一樣而表現出不一樣的行爲。

當用來獲取屬性值時，document.cookie返回當前頁面可用的（根據cookie的域、路徑、失效時間和安全設置）全部的字符串，字符串的格式以下：

"name1=value1;name2=value2;name3=value3";

當用來設置值的時候，document.cookie屬性可設置爲一個新的cookie字符串。這個字符串會被解釋並添加到現有的cookie集合中。如：

document.cookie = "_fa=aaaffffasdsf;domain=.dojotoolkit.org;path=/"

設置document.cookie並不會覆蓋cookie，除非設置的name value domain path都與一個已存在cookie重複。

因爲cookie的讀寫很是不方便，咱們能夠本身封裝一些函數來處理cookie，主要是針對cookie的添加、修改、刪除。

var cookieUtils = {

    get: function(name){

     var cookieName=encodeURIComponent(name) + "=";

     //只取得最匹配的name，value

     var cookieStart = document.cookie.indexOf(cookieName);

     var cookieValue = null;

      

     if (cookieStart > -1) {

      // 從cookieStart算起

      var cookieEnd = document.cookie.indexOf(';', cookieStart);

      //從=後面開始

      if (cookieEnd > -1) {

       cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

      } else {

       cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, document.cookie.length));

      }

     }

      

     return cookieValue;

    },

     

    set: function(name, val, options) {

      if (!name) {

        throw new Error("coolie must have name");

      }

      var enc = encodeURIComponent;

      var parts = [];

       

      val = (val !== null && val !== undefined) ? val.toString() : "";

      options = options || {};

      parts.push(enc(name) + "=" + enc(val));

      // domain中必須包含兩個點號

      if (options.domain) {

        parts.push("domain=" + options.domain);

      }

      if (options.path) {

        parts.push("path=" + options.path);

      }

      // 若是不設置expires和max-age瀏覽器會在頁面關閉時清空cookie

      if (options.expires) {

        parts.push("expires=" + options.expires.toGMTString());

      }

      if (options.maxAge && typeof options.maxAge === "number") {

        parts.push("max-age=" + options.maxAge);

      }

      if (options.httpOnly) {

        parts.push("HTTPOnly");

      }

      if (options.secure) {

        parts.push("secure");

      }

       

      document.cookie = parts.join(";");

    },

    delete: function(name, options) {

     options.expires = new Date(0);// 設置爲過去日期

     this.set(name, null, options);

    }

   }

緩存優勢

一般所說的Web緩存指的是能夠自動保存常見http請求副本的http設備。對於前端開發者來講，瀏覽器充當了重要角色。除此外常見的還有各類各樣的代理服務器也能夠作緩存。當Web請求到達緩存時，緩存從本地副本中提取這個副本內容而不須要通過服務器。這帶來了如下優勢：

緩存減小了冗餘的數據傳輸，節省流量

緩存緩解了帶寬瓶頸問題。不須要更多的帶寬就能更快加載頁面

緩存緩解了瞬間擁塞，下降了對原始服務器的要求。

緩存下降了距離延時， 由於從較遠的地方加載頁面會更慢一些。

緩存種類

緩存能夠是單個用戶專用的，也能夠是多個用戶共享的。專用緩存被稱爲私有緩存，共享的緩存被稱爲公有緩存。

私有緩存

私有緩存只針對專有用戶，因此不須要很大空間，廉價。Web瀏覽器中有內建的私有緩存——大多數瀏覽器都會將經常使用資源緩存在你的我的電腦的磁盤和內存中。如Chrome瀏覽器的緩存存放位置就在：C:\Users\Your_Account\AppData\Local\Google\Chrome\User Data\Default中的Cache文件夾和Media Cache文件夾。

公有緩存

公有緩存是特殊的共享代理服務器，被稱爲緩存代理服務器或代理緩存（反向代理的一種用途）。公有緩存會接受來自多個用戶的訪問，因此經過它可以更好的減小冗餘流量。

下圖中每一個客戶端都會重複的向服務器訪問一個資源（此時還不在私有緩存中），這樣它會屢次訪問服務器，增長服務器壓力。而使用共享的公有緩存時，緩存只須要從服務器取一次，之後不用再通過服務器，可以顯著減輕服務器壓力。

事實上在實際應用中一般採用層次化的公有緩存，基本思想是在靠近客戶端的地方使用小型廉價緩存，而更高層次中，則逐步採用更大、功能更強的緩存在裝載多用戶共享的資源。

緩存處理流程

 

而對於前端開發者來講，咱們主要跟瀏覽器中的緩存打交道，因此上圖流程簡化爲：

 

下面這張圖展現了某一網站，對不一樣資源的請求結果，其中能夠看到有的資源直接從緩存中讀取，有的資源跟服務器進行了再驗證，有的資源從新從服務器端獲取。

 

注意，咱們討論的全部關於緩存資源的問題，都僅僅針對GET請求。而對於POST, DELETE, PUT這類行爲性操做一般不作任何緩存

新鮮度限值

HTTP經過緩存將服務器資源的副本保留一段時間，這段時間稱爲新鮮度限值。這在一段時間內請求相同資源不會再經過服務器。HTTP協議中Cache-Control和 Expires能夠用來設置新鮮度的限值，前者是HTTP1.1中新增的響應頭，後者是HTTP1.0中的響應頭。兩者所作的事時都是相同的，但因爲Cache-Control使用的是相對時間，而Expires可能存在客戶端與服務器端時間不同的問題，因此咱們更傾向於選擇Cache-Control。

Cache-Control

下面咱們來看看Cache-Control均可以設置哪些屬性值：

max-age（單位爲s）指定設置緩存最大的有效時間，定義的是時間長短。當瀏覽器向服務器發送請求後，在max-age這段時間裏瀏覽器就不會再向服務器發送請求了。

?<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

  <title>Web Cache</title>

  <link rel="shortcut icon" href="./shortcut.png">

  <script>

  </script>

 </head>

 <body>

 <img src="./cache.png">

 </body>

</html>

var http = require('http');

var fs = require('fs');

http.createServer(function(req, res) {

  if (req.url === '/' || req.url === '' || req.url === '/index.html') {

    fs.readFile('./index.html', function(err, file) {

      console.log(req.url)

      //對主文檔設置緩存，無效果

      res.setHeader('Cache-Control', "no-cache, max-age=" + 5);

      res.setHeader('Content-Type', 'text/html');

      res.writeHead('200', "OK");

      res.end(file);

    });

  }

  if (req.url === '/cache.png') {

    fs.readFile('./cache.png', function(err, file) {

      res.setHeader('Cache-Control', "max-age=" + 5);//緩存五秒

      res.setHeader('Content-Type', 'p_w_picpaths/png');

      res.writeHead('200', "Not Modified");

      res.end(file);

    });

  }

   

}).listen(8888)

當在5秒內第二次訪問頁面時，瀏覽器會直接從緩存中取得資源

 

public 指定響應能夠在代理緩存中被緩存，因而能夠被多用戶共享。若是沒有明確指定private，則默認爲public。

private 響應只能在私有緩存中被緩存，不能放在代理緩存上。對一些用戶信息敏感的資源，一般須要設置爲private。

no-cache 表示必須先與服務器確認資源是否被更改過（依靠If-None-Match和Etag），而後再決定是否使用本地緩存。

若是上文中關於cache.png的處理改爲下面這樣，則每次訪問頁面，瀏覽器都須要先去服務器端驗證資源有沒有被更改。

 

fs.readFile('./cache.png', function(err, file) {

    console.log(req.headers);

    console.log(req.url)

    if (!req.headers['if-none-match']) {

      res.setHeader('Cache-Control', "no-cache, max-age=" + 5);

      res.setHeader('Content-Type', 'p_w_picpaths/png');

      res.setHeader('Etag', "ffff");

      res.writeHead('200', "Not Modified");

      res.end(file);

    } else {

      if (req.headers['if-none-match'] === 'ffff') {

        res.writeHead('304', "Not Modified");

        res.end();

      } else {

        res.setHeader('Cache-Control', "max-age=" + 5);

        res.setHeader('Content-Type', 'p_w_picpaths/png');

        res.setHeader('Etag', "ffff");

        res.writeHead('200', "Not Modified");

        res.end(file);

      }

    }

  });

no-store 絕對禁止緩存任何資源，也就是說每次用戶請求資源時，都會向服務器發送一個請求，每次都會下載完整的資源。一般用於機密性資源。

關於Cache-Control的使用，見下面這張圖（來自大額）

 

客戶端的新鮮度限值

Cache-Control不只僅能夠在響應頭中設置，還能夠在請求頭中設置。瀏覽器經過請求頭中設置Cache-Control能夠決定是否從緩存中讀取資源。這也是爲何有時候點擊瀏覽器刷新按鈕和在地址欄回車，在NetWork模塊中看到徹底不一樣的結果

 

Expires

不推薦使用Expires，它指定的是具體的過時日期而不是秒數。由於不少服務器跟客戶端存在時鐘不一致的狀況，因此最好仍是使用Cache-Control.

服務器再驗證

瀏覽器或代理緩存中緩存的資源過時了，並不意味着它和原始服務器上的資源有實際的差別，僅僅意味着到了要進行覈對的時間了。這種狀況被稱爲服務器再驗證。

若是資源發生變化，則須要取得新的資源，並在緩存中替換舊資源。

若是資源沒有發生變化，緩存只須要獲取新的響應頭，和一個新的過時時間，對緩存中的資源過時時間進行更新便可。

HTTP1.1推薦使用的驗證方式是If-None-Match/Etag，在HTTP1.0中則使用If-Modified-Since/Last-Modified。

Etag與If-None-Match

根據實體內容生成一段hash字符串，標識資源的狀態，由服務端產生。瀏覽器會將這串字符串傳回服務器，驗證資源是否已經修改，若是沒有修改，過程以下(圖片來自淺談Web緩存)：

上文的demo中咱們見到過服務器端如何驗證Etag：

 

因爲Etag有服務器構造，因此在集羣環境中必定要保證Etag的惟一性

If-Modified-Since與Last-Modified

這兩個是HTTP1.0中用來驗證資源是否過時的請求/響應頭，這兩個頭部都是日期，驗證過程與Etag相似，這裏不詳細介紹。使用這兩個頭部來驗證資源是否更新時，存在如下問題：

有些文檔資源週期性的被重寫，但實際內容沒有改變。此時文件元數據中會顯示文件最近的修改日期與If-Modified-Since不相同，致使沒必要要的響應。

有些文檔資源被修改了，但修改內容並不重要，不須要全部的緩存都更新（好比代碼註釋）

關於緩存的更新問題，請你們看看這裏張雲龍的回答，本文就不詳細展開了。

本文demo代碼以下：

<!DOCTYPE HTML>

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

  <title>Web Cache</title>

  <link rel="shortcut icon" href="./shortcut.png">

  <script>

  </script>

 </head>

 <body>

 <img src="./cache.png">

 </body>

</html>

var http = require('http');

var fs = require('fs');

http.createServer(function(req, res) {

  if (req.url === '/' || req.url === '' || req.url === '/index.html') {

    fs.readFile('./index.html', function(err, file) {

      console.log(req.url)

      //對主文檔設置緩存，無效果

      res.setHeader('Cache-Control', "no-cache, max-age=" + 5);

      res.setHeader('Content-Type', 'text/html');

      res.writeHead('200', "OK");

      res.end(file);

    });

  }

  if (req.url === '/shortcut.png') {

    fs.readFile('./shortcut.png', function(err, file) {

      console.log(req.url)

      res.setHeader('Content-Type', 'p_w_picpaths/png');

      res.writeHead('200', "OK");

      res.end(file);

    })

  }

  if (req.url === '/cache.png') {

    fs.readFile('./cache.png', function(err, file) {

      console.log(req.headers);

      console.log(req.url)

      if (!req.headers['if-none-match']) {

        res.setHeader('Cache-Control', "max-age=" + 5);

        res.setHeader('Content-Type', 'p_w_picpaths/png');

        res.setHeader('Etag', "ffff");

        res.writeHead('200', "Not Modified");

        res.end(file);

      } else {

        if (req.headers['if-none-match'] === 'ffff') {

          res.writeHead('304', "Not Modified");

          res.end();

        } else {

          res.setHeader('Cache-Control', "max-age=" + 5);

          res.setHeader('Content-Type', 'p_w_picpaths/png');

          res.setHeader('Etag', "ffff");

          res.writeHead('200', "Not Modified");

          res.end(file);

        }

      }

    });

  }

}).listen(8888)