我們主要關(guān)注的是cookie的特性，以及如何使用。所以，先不講枯燥的理論知識，相信這些理論大家從網(wǎng)上隨隨便便就能找到很多篇，我們只總結(jié)最正確的使用方式。

屬性

• key

  cookie名稱

• value

  cookie的值

  有一點(diǎn)需要注意的是，因?yàn)閏ookie的value是一個字符串，有可能會包含設(shè)置cookie的特殊字符，比如【逗號、分號、空格】等，所以我們要對value值進(jìn)行編碼處理，利用escape編碼，取值時用unescape解碼。

• domain

  cookie所在域。

  • 如果一個cookie顯示設(shè)置domain，那么該domain下或該domain下所有子域網(wǎng)頁都可以訪問到這個cookie。例如當(dāng)前有一個網(wǎng)頁http://a.shifei.com/a.html ,在這個網(wǎng)頁上執(zhí)行腳本。

  document.cookie="name=shifei;domain=.shifei.com";
  

  • 沒有顯示設(shè)置domain時，默認(rèn)為當(dāng)前網(wǎng)頁的host。

• max-age

  cookie有效期 ，以秒為單位 。

  max-age屬性用來代替舊的屬性expires，如果瀏覽器支持max-age，那么優(yōu)先使用max-age設(shè)置的過期時間，否則，仍然使用expires作為過期時間。

  兩種場景：

  1.max-age設(shè)置為正數(shù)時

  cookie從創(chuàng)建那一刻開始存活，max-age秒之后被刪除。

  2.設(shè)置為0或者負(fù)數(shù)時

  如果當(dāng)前瀏覽器里有同名cookie，則刪除該cookie。

  如果該瀏覽器里沒有同名cookie，則不創(chuàng)建。

• expires

  cookie的過期時間，用GMT或者UTC時間格式來表示 。

  cookie從創(chuàng)建之初到expires設(shè)置的時間內(nèi)是存活期，如果當(dāng)前時間大于expires設(shè)置的時間，則該cookie被刪除。

• path

  該屬性設(shè)置cookie允許被哪些目錄訪問。

  如當(dāng)前網(wǎng)頁為http://a.shifei.com/news/a.html。

  • 顯示設(shè)置

  documen.cookie="name=shifei;path=/";
  

  表示a.shifei.com域下的/目錄下的所有網(wǎng)頁都能訪問到該cookie

  • 默認(rèn)設(shè)置

    默認(rèn)設(shè)置的話，path取當(dāng)前目錄/news 。

    document.cookie="name=shifei;"
    

• httpOnly

  該屬性設(shè)置cookie是否可以通過javascript代碼來進(jìn)行訪問 。

  js是無法設(shè)置該屬性的，只能是服務(wù)端進(jìn)行設(shè)置。

  該屬性目的是為了防止cookie在傳輸過程中被篡改，提高網(wǎng)頁安全性。

• secure

  設(shè)置cookie只在確保安全的請求中傳送。

  當(dāng)請求是HTTPS 或者其他的安全協(xié)議時，帶有secure屬性的cookie才 能被發(fā)送到服務(wù)器。

  默認(rèn)情況，cookie不會帶有secure屬性，所以，如果沒有顯示設(shè)置secure屬性的cookie，在HTTPS和HTTP 協(xié)議下，都會被發(fā)送到服務(wù)端。

  有一點(diǎn)需要說明，帶有secure的cookie，只是在安全協(xié)議下才能被發(fā)送到服務(wù)端，但是，我們?nèi)匀豢梢酝ㄟ^瀏覽器查看到該cookie的。

設(shè)置

假設(shè)當(dāng)前網(wǎng)頁是 http://www.shifei.com/news/a.html

1. 設(shè)置cookie

   通過下面這種方式設(shè)置完之后，瀏覽器會創(chuàng)建一個名為taizi的cookie，domain為www.shifei.com，注意這個domain不帶點(diǎn)。path為/news,

   有效期是session會話期，瀏覽器關(guān)閉即失效。

document.cookie="taizi=yehua;"

2. 設(shè)置cookie在60秒后消失

   設(shè)置過期時間有兩個屬性可以選擇，一是<font color=red>expires</font>，二是<font color=red>max-age</font>。

   使用expires設(shè)置時，必須以GMT或者UTC格式的時間來表示，否則有效期設(shè)置失敗，將會取瀏覽器默認(rèn)設(shè)置session。

   document.cookie="taizi=yehua;max-age=10";
   //或者
   var currDate=new Date();
   //將currDate設(shè)置為當(dāng)前時間之后的60秒
   currDate.setTime(currDate.getTime()+60*1000);
   document.cookie="taizi=yehua;expires="+currDate.toGMTString();
   

3. 設(shè)置cookie的domain為頂級域

   document.cookie="taizi=yehua;domain=.shifei.com";
   

4. 設(shè)置cookie在頂級域的任何目錄都可以訪問

   document.cookie="taizi=yehua;domain=.shifei.com;path=/";
   

5. 刪除cookie

   將max-age設(shè)置為零或者負(fù)數(shù)，即可將cookie刪除。

   或者將expires設(shè)置成比當(dāng)前時間早的值。

   document.cookie="taizi=yehua;max-age=0";
   //或者
   document.cookie="taizi=yehua;max-age=-1";
   

注意

• 設(shè)置domain時為什么有的以點(diǎn)開頭，有的則不是。

  設(shè)置domain時，以點(diǎn)開頭的話，那么cookie的有效域只有設(shè)置的domain有效，哪怕該domain下的子域名也訪問不到該cookie。

• 如何設(shè)置多個cookie

  通過document.cookie="";這種方式，每調(diào)用一次，只能設(shè)置一個cookie，若想設(shè)置多個cookie，則需要調(diào)用多次。

• cookie是否可以同名？

  cookie可以同名，但是domain或者path不能完全相同,也就是說同名的cookie，只要domain或者path有一個不同，那么，都可以共存。

  舉個例子來說

  document.cookie="name=shifei;domain=.shifei.com"
  document.cookie="name=shifei;domain=mrd.shifei.com"
  

  通過這兩種方式設(shè)置完，瀏覽器將會創(chuàng)建兩個cookie，我們可以看到這兩個cookie是同名的，但是因?yàn)閐omain不同，所以瀏覽器不會只保留一個cookie。

• cookie的使用有哪些限制？ （題目雖然簡單，大家未必會在意。）

  1. 單個域名的所有cookie的大小不能超過4KB，最后設(shè)置的cookie如果超過4KB限制，設(shè)置會失敗。
  2. 單個域名cookie數(shù)量最多50個，safari和chrome沒有數(shù)量限制。
  3. cookie數(shù)量越多，體積越大，便會影響服務(wù)器傳輸效率，所以要慎用cookie，只把必須要帶給服務(wù)器的數(shù)據(jù)設(shè)置到cookie中。
  4. 默認(rèn)情況下，cookie不能跨域傳輸，但是通過下面兩部操作，可以實(shí)現(xiàn)跨域傳輸。
     • 瀏覽器設(shè)置xhr.withCredentials=true。
     • 服務(wù)端設(shè)置響應(yīng)頭Access-Control-Allow-Credentials:true

cookie的使用大致如此了，利用cookie，可以實(shí)現(xiàn)單點(diǎn)登錄，稍后我整理一個單點(diǎn)登錄的demo，放到github，大家如果有想要源碼進(jìn)行學(xué)習(xí)的可以找我要一下。