我们主要关注的是cookie的特性，以及如何使用。所以，先不讲枯燥的理论知识，相信这些理论大家从网上随随便便就能找到很多篇，我们只总结最正确的使用方式。

属性

• key

  cookie名称

• value

  cookie的值

  有一点需要注意的是，因为cookie的value是一个字符串，有可能会包含设置cookie的特殊字符，比如【逗号、分号、空格】等，所以我们要对value值进行编码处理，利用escape编码，取值时用unescape解码。

• domain

  cookie所在域。

  • 如果一个cookie显示设置domain，那么该domain下或该domain下所有子域网页都可以访问到这个cookie。例如当前有一个网页http://a.shifei.com/a.html ,在这个网页上执行脚本。

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

  • 没有显示设置domain时，默认为当前网页的host。

• max-age

  cookie有效期 ，以秒为单位 。

  max-age属性用来代替旧的属性expires，如果浏览器支持max-age，那么优先使用max-age设置的过期时间，否则，仍然使用expires作为过期时间。

  两种场景：

  1.max-age设置为正数时

  cookie从创建那一刻开始存活，max-age秒之后被删除。

  2.设置为0或者负数时

  如果当前浏览器里有同名cookie，则删除该cookie。

  如果该浏览器里没有同名cookie，则不创建。

• expires

  cookie的过期时间，用GMT或者UTC时间格式来表示 。

  cookie从创建之初到expires设置的时间内是存活期，如果当前时间大于expires设置的时间，则该cookie被删除。

• path

  该属性设置cookie允许被哪些目录访问。

  如当前网页为http://a.shifei.com/news/a.html。

  • 显示设置

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

  表示a.shifei.com域下的/目录下的所有网页都能访问到该cookie

  • 默认设置

    默认设置的话，path取当前目录/news 。

    document.cookie="name=shifei;"
    

• httpOnly

  该属性设置cookie是否可以通过javascript代码来进行访问 。

  js是无法设置该属性的，只能是服务端进行设置。

  该属性目的是为了防止cookie在传输过程中被篡改，提高网页安全性。

• secure

  设置cookie只在确保安全的请求中传送。

  当请求是HTTPS 或者其他的安全协议时，带有secure属性的cookie才 能被发送到服务器。

  默认情况，cookie不会带有secure属性，所以，如果没有显示设置secure属性的cookie，在HTTPS和HTTP 协议下，都会被发送到服务端。

  有一点需要说明，带有secure的cookie，只是在安全协议下才能被发送到服务端，但是，我们仍然可以通过浏览器查看到该cookie的。

设置

假设当前网页是 http://www.shifei.com/news/a.html

1. 设置cookie

   通过下面这种方式设置完之后，浏览器会创建一个名为taizi的cookie，domain为www.shifei.com，注意这个domain不带点。path为/news,

   有效期是session会话期，浏览器关闭即失效。

document.cookie="taizi=yehua;"

2. 设置cookie在60秒后消失

   设置过期时间有两个属性可以选择，一是<font color=red>expires</font>，二是<font color=red>max-age</font>。

   使用expires设置时，必须以GMT或者UTC格式的时间来表示，否则有效期设置失败，将会取浏览器默认设置session。

   document.cookie="taizi=yehua;max-age=10";
   //或者
   var currDate=new Date();
   //将currDate设置为当前时间之后的60秒
   currDate.setTime(currDate.getTime()+60*1000);
   document.cookie="taizi=yehua;expires="+currDate.toGMTString();
   

3. 设置cookie的domain为顶级域

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

4. 设置cookie在顶级域的任何目录都可以访问

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

5. 删除cookie

   将max-age设置为零或者负数，即可将cookie删除。

   或者将expires设置成比当前时间早的值。

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

注意

• 设置domain时为什么有的以点开头，有的则不是。

  设置domain时，以点开头的话，那么cookie的有效域只有设置的domain有效，哪怕该domain下的子域名也访问不到该cookie。

• 如何设置多个cookie

  通过document.cookie="";这种方式，每调用一次，只能设置一个cookie，若想设置多个cookie，则需要调用多次。

• cookie是否可以同名？

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

  举个例子来说

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

  通过这两种方式设置完，浏览器将会创建两个cookie，我们可以看到这两个cookie是同名的，但是因为domain不同，所以浏览器不会只保留一个cookie。

• cookie的使用有哪些限制？ （题目虽然简单，大家未必会在意。）

  1. 单个域名的所有cookie的大小不能超过4KB，最后设置的cookie如果超过4KB限制，设置会失败。
  2. 单个域名cookie数量最多50个，safari和chrome没有数量限制。
  3. cookie数量越多，体积越大，便会影响服务器传输效率，所以要慎用cookie，只把必须要带给服务器的数据设置到cookie中。
  4. 默认情况下，cookie不能跨域传输，但是通过下面两部操作，可以实现跨域传输。
     • 浏览器设置xhr.withCredentials=true。
     • 服务端设置响应头Access-Control-Allow-Credentials:true

cookie的使用大致如此了，利用cookie，可以实现单点登录，稍后我整理一个单点登录的demo，放到github，大家如果有想要源码进行学习的可以找我要一下。