概念（MDN）

Cookie 是一个请求首部，其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies。

语法

Cookie: <cookie-list>
Cookie: name=value
Cookie: name=value; name2=value2;
name3=value3

<cookie-list>
一系列的名称/值对，形式为 <cookie-name>=<cookie-value>。名称/值对之间用分号和空格 ('; ')隔开。

示例

Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;

---

document.cookie

访问cookie

//读取所有可从此位置访问的Cookie
allCookies = document.cookie;
/**
> document.cookie
> "wP_h=c19715ae283b7e7fcb230c4fb04fe21ba27e388c; 
dwf_sg_task_completion=False; _ga=GA1.2.1039822207.1517630602; UM_distinctid=161d9e2cd38711-04d50da8874aca-4323461-13c680-161d9e2cd3970e; 
csrftoken=tv5EEHAqYmtJ6WKZukqVzPdd40cLIHwa; django_language=zh-CN; 
_gid=GA1.2.934957483.1527554632; CNZZDATA1261666818=226206623-1519778090-null%7C1527638720"
*/

设置cookie

• 以下可选的cookie属性值可以跟在键值对后，用来具体化对cookie的设定/更新，使用分号以作分隔：
  • ;path=*path* (例如 '/', '/mydir') 如果没有定义，默认为当前文档位置的路径。
  • ;domain=*domain* (例如 'example.com'， '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义，默认为当前文档位置的路径的域名部分。
  • ;max-age=*max-age-in-seconds* (例如一年为606024*365)
  • ;expires=*date-in-GMTString-format* 如果没有定义，cookie会在对话结束时过期
    • 这个值的格式参见Date.toUTCString()
      假如二者 （指 Expires 和Max-Age） 均存在，那么 Max-Age 优先级更高。
  • ;secure (cookie只通过https协议传输)
• cookie的值字符串可以用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).

Example(Console)

• //写一个新 cookie
  document.cookie = "p1=1";
  

  image.png

• // path只能设置为当前路径的子路径
  document.cookie = "p2=1 ;path=/zh-CN/docs";
  

  image.png

• 只能设置为这个或者默认的
  document.cookie = "p4=1 ;domain=.mozilla.org"
  //或者
  document.cookie = "p4=1 ;domain=mozilla.org"
  

  image.png

• // 10秒后这个字段将失效（自动删除）
  document.cookie = "p5=1 ;max-age=10";
  

  image.png

• // 设置过期时间
  document.cookie = "p6=1 ;expires="+(new Date(Date.now()+10000)).toUTCString()
  

  image.png

• // 只有使用https带有secure选项的字段才能设置成功
  // 值无所谓 都会设置secure为true
  document.cookie = "p7=1 ;secure="
  

  image.png

其他

• 你可以通过更新一个cookie的过期时间为0来删除一个cookie。

• 请注意, 更多/更大的 cookies 意味着每个请求都要包含更繁重的数据传输. 如果您只是需要存储些 "client-only" 的数据, 那么郑重建议您使用 WHATWG DOM Storage.

• 一次只能操作一个字段： document.cookie = "p1=1; p2=1"//只添加了p1

• 一次设置多项属性： document.cookie = "p1=1 ;path=/ ;max-age=3600"

• name可以重复，只要属性不同：

    document.cookie = "p1=2"
    document.cookie = "p1=2 ;path=/"
    document.cookie = "p1=4"
    document.cookie = "p1=3 ;path=/"
  

  同名参数.png
  更新.png

• document.cookie 只包含键值对的字符串，并没有属性

  document.cookie
  "p1=4; p1=3"
  

• add

  document.cookie = "p1="
  document.cookie = ""
  document.cookie = "p2=1"
  //document.cookie
  //"p1=; ; p2=1"
  

  image.png