Web阶段性技术⽂档（Cookie）
⼀、基本概念的学习
1、什么是Cookie
Cookie 是服务器保存在浏览器的⼀⼩段⽂本信息。浏览器每次向服务器发出请求，就会⾃动附上这段信息。Cookie 就是这么简单，这就是 Web 开发⾥ Cookie 的含义。
2、Cookie的作⽤
（1）Cookie 主要⽤来分辨两个请求是否来⾃同⼀个浏览器
（2）⽤来保存⼀些状态信息，例如：
session如何设置和读取
a.对话（session）管理：保存登录、购物车等需要记录的信息。
b.个性化：保存⽤户的偏好，⽐如⽹页的字体⼤⼩、背景⾊等等。
c.追踪：记录和分析⽤户⾏为。
不推荐使⽤Cookie作为客户端存储，原因：
a.它的容量很⼩（4KB）。
b.缺乏数据操作接⼝。
c.⽽且会影响性能。
客户端储存应该使⽤ Web storage API 和 IndexedDB。
（3）使⽤Cookie⼀般有两个作⽤。
第⼀个作⽤是识别⽤户⾝份。
第⼆个作⽤是记录历史。
借此达到⾥记录⽤户操作历史的⽬的。
3、Cookie的组成
Cookie 包含以下⼏⽅⾯的信息:
a. Cookie 的名字。
b. Cookie 的值。（真正的数据写在这⾥⾯）(a、b两点就是键值对 )
c. 到期时间。
d. 所属域名。（默认是当前域名）
e. ⽣效的路径。（默认是当前⽹址）(c/d/e是cookie的属性)
4、Cookie的作⽤过程
举例来说:
假设⽤户访问⽹址ample，服务器在浏览器写⼊⼀个 Cookie。这个 Cookie
就会包含ample这个域名(d)，以及根路径/(e)。这意味着，这个 Cookie 对该域名的根路径和它的所有⼦路径都有效。如果路径设为/forums，那么这个 Cookie 只有在访问ample/forums及其⼦路径时才有效。
以后，浏览器⼀旦访问这个路径，浏览器就会附上这段 Cookie 发送给服务器。
5、Cookies作⽤范围
同源限制⽅⾯内容可以参考⽹页：
⼆、HTTP 协议中的Cookie
1、HTTP 回应：Cookie 的⽣成(服务器端⽣成cookies)
服务器如果希望在浏览器保存 Cookie，就要在 HTTP 回应的头信息⾥⾯，放置⼀个Set-Cookie字段:
Set-Cookie:foo=bar
上⾯的代码会在浏览器保存⼀个名为foo的 Cookie，它的值为bar。
设置的格式为:<；键(名)>=<；值>。
HTTP 回应可以包含多个Set-Cookie字段，即在浏览器⽣成多个 Cookie。下⾯是⼀个例⼦:
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
[page content]
除了 Cookie 的值，Set-Cookie字段还可以附加 Cookie 的属性。⼀个Set-Cookie字段⾥⾯，可以同时包括多个属性，没有次序的要求。下⾯是设置⼀个Cookie的例⼦：除了名与它的值，还包含Domain属性Secure属性和HttpPnly属性:
Set-Cookie:<cookie-name>=<cookie-value>;
Domain=<domain-value>;Secure; HttpOnly
除了键=值来设置cookie的名字和值之外，还可以设置属性。
a. Expires，Max-Age⽤来设置cookie持续时间。
b. Domain，Path设置发送http请求时那些域名和路径需要附带这个Cookie。
c. Secure属性指定浏览器只有在加密协议 HTTPS 下才能发送。
d. HttpOnly属性指定该 Cookie ⽆法通过 JavaScript 脚本拿到。
具体⽤法可以参考⽹上的很多博客，这⾥不再赘述。
2、HTTP 请求：Cookie 的发送(浏览器发送Cookie)
浏览器向服务器发送 HTTP 请求时，每个请求都会带上相应的 Cookie。也就是说，把服务器早前保存在浏览器的这段信息，再发回服务器。这时要使⽤ HTTP 头信息的Cookie字段。
Cookie: foo=bar
上⾯代码会向服务器发送名为foo的 Cookie，值为bar。
Cookie字段可以包含多个 Cookie，使⽤分号（;）分隔。
Cookie: name=value; name2=value2; name3=value3
下⾯是⼀个Http请求的例⼦。
GET /sample_page.html HTTP/1.1
Host:
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
服务器收到浏览器发来的 Cookie 时，有两点是⽆法知道的(因为这些Cookie的属性只保存在浏览器上)。
a.Cookie 的各种属性，⽐如何时过期。
b.哪个域名设置的 Cookie，到底是⼀级域名设的，还是某⼀个⼆级域名设的。
三、kie读写当前⽹页的Cookie
1、读Cookie
读取的时候，它会返回当前⽹页的所有 Cookie，前提是该 Cookie 不能有HTTPOnly属性。
2、写Coookie
但是，kie⼀次只能写⼊⼀个 Cookie，⽽且写⼊并不是覆盖，⽽是添加。
// test1=hello;test2=world
写⼊ Cookie 的时候，可以⼀起写⼊ Cookie 的属性。
各个属性的写⼊注意点如下：
a. path属性必须为绝对路径，默认为当前路径。
b. domain属性值必须是当前发送 Cookie 的域名的⼀部分。⽐如，当前域名是example，就不能将其设为foo。该属性默认为当前的⼀级域名（不含⼆级域名）。
c. max-age属性的值为秒数。
d. expires属性的值为 UTC 格式，可以使⽤ Dat
UTCString ()进⾏⽇期格式转换。
document. cookie写⼊ Cookie 的例⼦如下。
+ 'expires=' + GMTString() + '; '
+ 'path=/subdirectory; '
+ 'domain=*.example';
Cookie 的属性⼀旦设置完成，就没有办法读取这些属性的值。
3、Cookie 的删除
删除⼀个现存 Cookie 的唯⼀⽅法，是设置它的expires属性为⼀个过去的⽇期。
上⾯代码中，名为fontSize的 Cookie 的值为空，过期时间设为1970年1⽉1⽉零点，就等同于删除了这个 Cookie。
四、以登录注册理解Cookie的作⽤过程
1、Cookie在注册登录时的作⽤过程
注册：注册时把账号密码写⼊数据库。
登录：第⼀次登录时服务器给浏览器发送Cookie。
后台的登录路由代码(nodejs)：
else if (path === '/sign_in' && method === 'POST') {
readBody(request).then((body) => {
let strings=body.split('&')
let hash = {}
strings.forEach((string) => {
let parts = string.split('=')
let key = parts[0]
let value = parts[1]
hash[key] = decodeURIComponent(value)
})
let {
email,
password
} = hash
var users = fs.readFileSync('./db/users', 'utf8')
try {
users = JSON.parse(users) // []
} catch (exception) {
users = []
}
let found
for (let i = 0; i < users.length; i++) {
if (users[i].email === email && users[i].password === password) {
found = true
break
}
}
if (found) {//关键在这⾥，验证成功，设置登录Cookie为登录的邮箱，并放在响应⾥发给浏览器
response.setHeader('Set-Cookie', `sign_in_email=${email}`)
response.statusCode = 200
} else {
response.statusCode = 401
}
})
}
在登录成功的⼀瞬间，需要后台设置⼀个Cookie，记录⼀下登陆的⽤户id(这⾥⽤邮箱表⽰，代码在上⾯)，然后发响应给浏览器例如在服务器端设置响应头：set-cookies：
这时候我们查看响应：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。