Cookie
【牢记：前端永远不要读/写Cookie】
定义
HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份，所以我们浏览器仅仅用HTTP协议是远远不够的。
Cookie的本质是HTTP协议的内容，是一小段的文本信息（key-value格式）。
特点
- 服务器通过Set-Cookie响应头设置cookie
- 浏览器得到cookie后，每次请求都要带上这个cookie
- 服务器读取cookie就知道登录用户的信息
- cookie默认的最大存储量是4k左右
- cookie默认在网页关闭后就失效，后台代码可以任意设置cookie的过期时间。
Cookie的设置和读取
设置：
response.setHeader('Set-Cookie', `sign_in_email = ${email}`)
设置后，浏览器端的该响应头（Response Headers）会存在Set-Cookie字段，其他同源路径的请求头（Request Headers）会存在Cookie字段。
读取：
let string = request.headers.cookie //是一个字符串
关于Cookie的一些问题
- 我在 Chrome 登录了得到 Cookie，用 Safari 访问，Safari 会带上 Cookie 吗?
答：no - Cookie 存在哪？
答： Windows存在 C 盘的一个文件里 - Cookie会被用户篡改吗？
答： 可以，所以cookie是不安全的。 - Cookie 有效期吗？
答： 默认有效期20分钟左右，不同浏览器策略不同
后端可以强制设置有效期，具体语法看 MDN - Cookie 遵守同源策略吗
答：也有，不过跟 AJAX 的同源策略稍微有些不同。
当请求 qq.com 下的资源时，浏览器会默认带上 qq.com 对应的 Cookie，不会带上 baidu.com 对应的 Cookie
当请求 v.qq.com 下的资源时，浏览器不仅会带上 v.qq.com 的Cookie，还会带上 qq.com 的 Cookie
另外 Cookie 还可以根据路径做限制，请自行了解，这个功能用得比较少。 - 如何设置Cookie的过期时间
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
//cookie 的最长有效时间，形式为符合 HTTP-date 规范的时间戳
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
//在 cookie 失效之前需要经过的秒数
前端:
expires:
var date=new Date();
date.setTime(date.getTime()+30*60*1000); //设置date为当前时间+30分
document.cookie="key=value; expires="+date.toGMTString(); //将date赋值给expires
max-age:
document.cookie="key=value; Max-Age= 300";
后端
expires:
var date=new Date();
date.setTime(date.getTime()+30*60*1000); //设置date为当前时间+30分
document.cookie="key=value; expires="+date.toGMTString(); //将date赋值给expires
max-age:
document.cookie="key=value; Max-Age= 300";
- 删除Cookie
原理就是使Cookie立马失效
expires:
document.cookie="key=value; expires= Thu, 01 Jan 1970 00:00:00 GMT";
或者是
var date=new Date(0);
date.setTime(date.getTime()+30*60*1000); //设置date为当前时间+30分
document.cookie="key=value; expires="+date.toGMTString(); //将date赋值给expires
max-age:
document.cookie="key=value; Max-Age= 0"
Set-Cookie
响应首部
Set-Cookie被用来由服务器端向客户端发送cookie。
详细解析见：Set-Cookie(MDN)
语法：
Set-Cookie: <cookie-name>=<cookie-value> //普通用法
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> //cookie 的最长有效时间，形式为符合 HTTP-date 规范的时间戳
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit> //在 cookie 失效之前需要经过的秒数
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> //指定 cookie 可以送达的主机名
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value> //指定一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部
Set-Cookie: <cookie-name>=<cookie-value>; Secure //一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly //设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由 Document.cookie属性、XMLHttpRequest和 Request 的APIs 进行访问
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
//以上两个可选，允许服务器设定一则 cookie 不随着跨域请求一起发送，这样可以在一定程度上防范跨站请求伪造攻击
// Multiple directives are also possible, for example:
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly
Session
特点：
- 将sessionId（随机数）通过Cookie发送给客户端
- 客户端访问服务器时，服务器读取sessionId
- 服务器有一块内存（哈希表）保存了所有session
- 通过SessionId我们可以得到对应用户的隐私信息，如id等
- 这块内存（哈希表）就是服务器上的所有session
SessionStorage
特点
- SessionStorage跟HTTP无关
- HTTP不会带上SessionStorage的值
- 只有相同域名的页面才能互相读取SessionStorage
- 每个域名SessionStorage最大存储量为5Mb左右
- SessionStorage在用户关闭页面（会话结束）后失效
LocalStorage
特点
- localStorage 跟HTTP无关
- HTTP不会带上localStorage的值
- 只有相同域名的页面才能互相读取localStorage
- 每个域名localStorage 最大存储量为5Mb左右
- 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）等跨页面存储内容的场景
- localstorage理论上永久有效，没办法设置过期时间，除非用户清理缓存
全局对象
window.localStorage是一个名为Storage的全局对象，日常主要使用以下三个方法：
- localStorage.getItem(key): 获取指定key本地存储的值。
- localStorage.setItem(key): 将value存储到key字段。
- localStorage.remoteItem(key): 删除指定key本地存储的值。
本质
localStorage是html5提供的一个API，localStorage的实质是一个哈希。
localStorage只能存string，不能存函数对象等，存了也没用，会转化成string。
localStorage可以将内容存到C盘的文件里，以便以后使用。没有localStorage之前都不能这样操作。
session是服务器上的哈希，localStorage是浏览器上的哈希。
问题：cookie和localStorage为什么会放在一起比较
- localStorage是一个HTML5新出的API，在这之前，跨页面的存储都是通过Cookie进行的
- 但是Cookie进行跨页面存储需要带上一个字符串，大小在1k左右，但是一个请求才120B，这会使得请求变慢。localStorage不会拖慢请求速度。
- Cookie和localStorage都是存储在C盘文件夹中，都可以进行长久化存储
- 前端永远不要读写Cookie
面试题
cookie和session是什么关系？
答：
1.Cookie 保存在客户端，每次都随请求发送给 Server。
2.Session 保存在 Server 的内存里，其 Session ID 是通过 Cookie 发送给客户端的cookie和localstorage的区别是什么？
答：
1.最大的区别是cookie是HTTP协议的内容，cookie每次请求都会带给服务器，而local storage不会，因为跟HTTP无关。
2.然后可以回答最大存储量的不同，Cookie的最大存储量是4k左右，而LocalStorage的最大存储量是5Mb左右。localstorage和sessionStorage的区别
答： sessionstorage在用户关闭页面（会话结束）后失效。local storage永久有效，除非用户清理缓存。Cache-Control: max-age=1000缓存 与ETag的「缓存」有什么区别？
答：
1.Cache-Control: max-age=1000缓存 : 指在1000秒内，不去向服务器进行请求，直接在缓存中拿到文件。
2.ETag的「缓存」： 指向服务器进行请求，如果文件内容没有变化，即md5编码验证相等，则不去下载文件。
最大的区别就是Cache-Control: max-age=1000在一定时间内不发起请求，而Etag始终发起请求，但不一定需要下载文件。
