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

屬性

• key

  cookie名稱(chēng)

• value

  cookie的值

  有一點(diǎn)需要注意的是赞枕，因?yàn)閏ookie的value是一個(gè)字符串澈缺，有可能會(huì)包含設(shè)置cookie的特殊字符，比如【逗號(hào)炕婶、分號(hào)姐赡、空格】等，所以我們要對(duì)value值進(jìn)行編碼處理柠掂，利用escape編碼项滑，取值時(shí)用unescape解碼。

• domain

  cookie所在域涯贞。

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

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

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

• max-age

  cookie有效期 皇拣，以秒為單位 严蓖。

  max-age屬性用來(lái)代替舊的屬性expires，如果瀏覽器支持max-age氧急，那么優(yōu)先使用max-age設(shè)置的過(guò)期時(shí)間颗胡，否則，仍然使用expires作為過(guò)期時(shí)間态蒂。

  兩種場(chǎng)景：

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

  cookie從創(chuàng)建那一刻開(kāi)始存活杭措，max-age秒之后被刪除费什。

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

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

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

• expires

  cookie的過(guò)期時(shí)間泉懦，用GMT或者UTC時(shí)間格式來(lái)表示 。

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

• path

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

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

  • 顯示設(shè)置

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

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

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

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

    document.cookie="name=shifei;"
    

• httpOnly

  該屬性設(shè)置cookie是否可以通過(guò)javascript代碼來(lái)進(jìn)行訪問(wèn) 汹押。

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

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

• secure

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

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

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

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

設(shè)置

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

1. 設(shè)置cookie

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

   有效期是session會(huì)話期咱扣，瀏覽器關(guān)閉即失效绽淘。

document.cookie="taizi=yehua;"

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

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

   使用expires設(shè)置時(shí)壮池，必須以GMT或者UTC格式的時(shí)間來(lái)表示，否則有效期設(shè)置失敗杀怠，將會(huì)取瀏覽器默認(rèn)設(shè)置session椰憋。

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

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

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

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

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

5. 刪除cookie

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

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

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

注意

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

  設(shè)置domain時(shí)窗骑，以點(diǎn)開(kāi)頭的話，那么cookie的有效域只有設(shè)置的domain有效漆枚，哪怕該domain下的子域名也訪問(wèn)不到該cookie慧域。

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

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

• cookie是否可以同名互订？

  cookie可以同名，但是domain或者path不能完全相同,也就是說(shuō)同名的cookie痘拆，只要domain或者path有一個(gè)不同仰禽，那么，都可以共存纺蛆。

  舉個(gè)例子來(lái)說(shuō)

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

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

• cookie的使用有哪些限制字支？ （題目雖然簡(jiǎn)單凤藏，大家未必會(huì)在意。）

  1. 單個(gè)域名的所有cookie的大小不能超過(guò)4KB堕伪，最后設(shè)置的cookie如果超過(guò)4KB限制揖庄，設(shè)置會(huì)失敗。
  2. 單個(gè)域名cookie數(shù)量最多50個(gè)欠雌，safari和chrome沒(méi)有數(shù)量限制前痘。
  3. cookie數(shù)量越多港粱，體積越大福青，便會(huì)影響服務(wù)器傳輸效率，所以要慎用cookie而咆，只把必須要帶給服務(wù)器的數(shù)據(jù)設(shè)置到cookie中。
  4. 默認(rèn)情況下齐苛，cookie不能跨域傳輸翘盖，但是通過(guò)下面兩部操作桂塞，可以實(shí)現(xiàn)跨域傳輸凹蜂。
     • 瀏覽器設(shè)置xhr.withCredentials=true。
     • 服務(wù)端設(shè)置響應(yīng)頭Access-Control-Allow-Credentials:true

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