前端笔记第四期（cookie简介）

为什么有cookie

• http是上下文无关、无状态协议（在同一个链接中，两个执行成功的请求之间是没有关系的）
• 浏览器每次发送请求都会携带cookie，所以cookie要存储与服务器端关键的数据，以免cookie中数据量大，造成服务器性能下降
• set-cookie 由服务器来设置

cookie不可跨域
cookie存储在浏览器里面，浏览器的安装目录中
cookie有数量与大小的限制（50个左右、4kb左右）
cookie的存储时间非常灵活，可以自己设置
cookie不光可以服务器设置，客户端也可以设置

cookie的属性

1. name： cookie的名字，具有唯一性
2. value： cookie的值
3. domain： 设置cookie在哪个域下是有效的
4. path： cookie的路径
5. expires： cookie的过期时间，设置的格式为GMT（设置的是过期的时间点）
6. max-age： cookie的有效期 （设置的是有效时间段）
    -1：临时的cookie
    0：有效期已经到了的cookie
    正数：cookie还能存活的秒数
7. HttpOnly： 有这个标记的cookie，前端无法获取
8. secure： 设置cookie只能通过https协议传输
9. SameSite： 设置cookie在跨域请求的时候不能被发送（跨域请求的时候不能发送给服务器，避免出现网络攻击等）

document.cookie = 'name=川川';
// cookie只能设置一次，age不生效
document.cookie = 'name=川川; age=18';

// cookie属性，这个cookie只在docs路径下有效
document.cookie = 'color=red; domain=127.0.0.1; path=/docs';
console.log(new Date());

// 设置一个cookie，过期时间为2108年2月1日
document.cookie = 'margin=20; expires='+new Date(2108,1,1);

// 设置一个cookie，有效期为5s，5s后会被删掉
document.cookie = 'padding=30; max-age=5';

// 设置定时器，延时4s打印cookie
setTimeout(function (){
	console.log(document.cookie);
}, 4000);
// 设置定时器，延时5s打印cookie，因为padding有效期为5s，所以打印时没有padding
setTimeout(function (){
	console.log(document.cookie);
}, 5000);