cookie实践

cookie实践

前面介绍了cookie和session的区别，这里读起来是有收获的，可是不作实验老是感受不少东西浮在表面上，因此这里来作一下实验，看一下相应的知识点。

服务器搭建

这里使用最简单的node express，搭建一个简单的web服务器，相关命令以下：

mkdir cookie-test && cd cookie-test
npm init
npm install express --save
touch main.js

命令执行完成以后会发现已经有以下的结构出来，咱们只须要编辑main.js便可：

cookie-test
|- main.js
|- node_modules
|- package.json

编辑代码，输入：

const express = require('express')
const app = express()

app.listen(3000, err => {
  if (err) {
    return console.log(err)
  }
  console.log('---- 打开 http://localhost:3000 吧----')
})

app.get('/', (req, res) => {
  res.send('<h1>hello world!</h1>')
})

这样就创建起一个简单的web服务器，咱们来设置几个cookie看下。

cookie设置

在设置cookie前，咱们先回顾一下cookie的工做原理：

1. 首先，咱们假设当前域名下仍是没有 Cookie 的
2. 接下来，浏览器发送了一个请求给服务器（这个请求是还没带上 Cookie 的）
3. 服务器设置 Cookie 并发送给浏览器（固然也能够不设置）
4. 浏览器将 Cookie 保存下来
5. 接下来，之后的每一次请求，都会带上这些 Cookie，发送给服务器

咱们来验证一下，修改代码，加上下面的一行：

app.get('/', (req, res) => {
  res.cookie('key0', 'value0')
  res.send('<h1>hello world!</h1>')
})

重启服务器后看一下整个请求的过程： 首次请求中在request中没有包括key0=value0的cookie，在response中带了key0的cookie，第二次请求后： 已经带了key0的cookie。咱们能够在console里看一下当前的cookie值，使用 document.cookie 就能够查看： 确实已经有了key0的cookie。 下面总结一下什么是cookie：

1. Cookie 就是浏览器储存在用户电脑上的一小段文本文件
2. Cookie 是纯文本格式，不包含任何可执行的代码
3. Cookie 由键值对构成，由分号和空格隔开
4. Cookie 虽然是存储在浏览器，可是一般由服务器端进行设置
5. Cookie 的大小限制在 4kb 左右

cookie的属性

前面咱们讲过，cookie的内容主要包括：名字，值，过时时间，路径和域，咱们梳理一下前面的内容，作一个概括总结：

1. cookie的内容主要包括：名字，值，过时时间，路径和域
2. 路径与域合在一块儿就构成了cookie的做用范围
3. 若是不设置过时时间，则表示这个cookie的生命期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了

属性就是对自身包含的内容设置一些特殊参数的东西，好比何时过时等等，下面咱们就来看cookie的属性。

expires / max-age

expires / max-age 都是控制 Cookie 失效时刻的选项。若是没有设置这两个选项，则默认有效期为 session，即会话 Cookie。这种 Cookie 在浏览器关闭后就没有了。

expires

expires 选项用来设置 Cookie 什么时间内有效，expires 实际上是 Cookie 失效日期。 expires 必须是 GMT 格式的时间（能够经过 new Date().toGMTString() 或者 new Date().toUTCString() 来得到） 咱们修改一下代码：

app.get('/', (req, res) => {
  res.cookie('key0', 'value0')
  res.cookie('key1', 'value1', {
			expires: new Date(Date.now() + 10000)
		})
  res.send('<h1>hello world!</h1>')
})

这里设置了10s的失效时间，咱们来看一下实际运行的状况： 发现已经设置了expire的过时时间，这时候在console里执行如下代码：

console.log(`如今的 cookie 是：${document.cookie}`)
setTimeout(() => {
  console.log(`5 秒后的 cookie 是：${document.cookie}`)
}, 5000)
setTimeout(() => {
  console.log(`10 秒后的 cookie 是：${document.cookie}`)
}, 10000)

观察到如下现象： 10s以后，key1的cookie已经失效了。 ######max-age expires 是 http/1.0 协议中的选项，在新的 http/1.1 协议中 expires 已经由 max-age 选项代替，二者的做用都是限制 Cookie 的有效时间。expires 的值是一个时间点 (Cookie 失效时刻 = expires)，而 max-age 的值是一个以秒为单位时间段 (Cookie 失效时刻 = 建立时刻 + max-age) 当二者都存在的时候，以max-age的值为准：

res.cookie('key2', 'value2', {
		maxAge: 10000,
	})
	res.cookie('key3', 'value3', {
			maxAge: 15000,
			expires: new Date(Date.now() + 10000)
    })

咱们看一下实际的运行效果：

1. key1只有设置了expire，所以只有expire的值；
2. key2只有设置max-age，会默认把max-age和expire设置成同样的值；
3. key3 max-age和expire设置了不一样的值，所以cookie里过时时间也不同；

console运行以前的代码，修改打印cookie的时间，得出如下结果： 这里console打印的内容没改，可是等待的时间已经变成10s 15s，分析一下上面的数据：

1. key2 max-age=10s,在10s后失效；
2. key3 expire=10s max-age=15s，在15s后失效，符合“以max-age的值为准”的结论；

domain 和 path

name、domain 和 path 能够标识一个惟一的 Cookie。domain 和 path 两个选项共同决定了 Cookie 什么时候被浏览器自动添加到请求头部中发送出去。 若是没有设置这两个选项，则会使用默认值。domain 的默认值为设置该 Cookie 的网页所在的域名，path 默认值为设置该 Cookie 的网页所在的目录。

secure

secure 选项用来设置 Cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其余安全协议时，包含 secure 选项的 Cookie 才能被保存到浏览器或者发送至服务器。 默认状况下，Cookie 不会带 secure 选项(即为空)。因此默认状况下，不论是 HTTPS 协议仍是 HTTP 协议的请求，Cookie 都会被发送至服务端。

httpOnly

这个选项用来设置 Cookie 是否能经过 js 去访问。默认状况下，Cookie 不会带 httpOnly 选项(即为空)，客户端是能够经过 js 代码去访问（包括读取、修改、删除等）这个 Cookie 的。当 Cookie 带 httpOnly 选项时，客户端则没法经过 js 代码去访问（包括读取、修改、删除等）这个 Cookie。 相应的实验能够经过设置

res.cookie('httpOnlyTest', 'testValue', {
			httpOnly: true
		})

来实验，会发如今console里打印cookie的时候没有httpOnlyTest这个cookie值。

关于domain和path

domain和path分别指代的是做用域和路径，咱们先来看看域名的部分定义：

做用域

子域，是相对父域来讲的，指域名中的每个段。各子域之间用小数点分隔开。放在域名最后的子域称为最高级子域，或称为一级域，在它前面的子域称为二级域。

如下图为例，news.163.com 和 sports.163.com 是子域，163.com 是父域。 当 Cookie 的 domain 为 news.163.com，那么访问 news.163.com 的时候就会带上 Cookie； 当 Cookie 的 domain 为 163.com，那么访问 news.163.com 和 sports.163.com 就会带上 Cookie

做用路径

当 Cookie 的 domain 是相同的状况下，也有是否带上 Cookie 也有必定的规则。 在子路径内能够访问访问到父路径的 Cookie，反过来就不行。

设置 Cookie

明确一点：Cookie 能够由服务端设置，也能够由客户端设置。看到这里相信你们均可以理解了吧。

服务端设置 Cookie

1. 一个 Set-Cookie 字段只能设置一个 Cookie，当你要想设置多个 Cookie，须要添加一样多的 Set-Cookie 字段
2. 服务端能够设置 Cookie 的全部选项：expires、domain、path、secure、HttpOnly

客户端设置 Cookie

在网页即客户端中咱们也能够经过 js 代码来设置 Cookie。 能够设置 Cookie 的下列选项：expires、domain、path，各个键值对之间都要用 ; 和 空格 隔开

document.cookie='name=value; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/';

secure

只有在 https 协议的网页中，客户端设置 secure 类型的 Cookie 才能成功

HttpOnly

客户端中没法设置 HttpOnly 选项

删除 Cookie

Cookie 的 name、path 和 domain 是惟一标识一个 Cookie 的。咱们只要将一个 Cookie 的 max-age 设置为 0，就能够删除一个 Cookie 了。

let removeCookie = (name, path, domain) => {
  document.cookie = `${name}=; path=${path}; domain=${domain}; max-age=0`
}