HTTP Cookie && Session && LocalS

本篇分为 Cookie Session LocalStorage SessionStorage 面试题五部分

Cookie

【牢记：前端永远不要读/写Cookie】

定义

HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份，所以我们浏览器仅仅用HTTP协议是远远不够的。
Cookie的本质是HTTP协议的内容，是一小段的文本信息（key-value格式）。

特点

1. 服务器通过Set-Cookie响应头设置cookie
2. 浏览器得到cookie后，每次请求都要带上这个cookie
3. 服务器读取cookie就知道登录用户的信息
4. cookie默认的最大存储量是4k左右
5. cookie默认在网页关闭后就失效，后台代码可以任意设置cookie的过期时间。
   Cookie机制

Cookie的设置和读取

设置：

response.setHeader('Set-Cookie', `sign_in_email = ${email}`)

设置后，浏览器端的该响应头（Response Headers）会存在Set-Cookie字段，其他同源路径的请求头（Request Headers）会存在Cookie字段。
读取：

let string = request.headers.cookie //是一个字符串

关于Cookie的一些问题

1. 我在 Chrome 登录了得到 Cookie，用 Safari 访问，Safari 会带上 Cookie 吗?
   答：no
2. Cookie 存在哪？
   答： Windows存在 C 盘的一个文件里
3. Cookie会被用户篡改吗？
   答： 可以，所以cookie是不安全的。
4. Cookie 有效期吗？
   答： 默认有效期20分钟左右，不同浏览器策略不同
   后端可以强制设置有效期，具体语法看 MDN
5. Cookie 遵守同源策略吗
   答：也有，不过跟 AJAX 的同源策略稍微有些不同。
   当请求 qq.com 下的资源时，浏览器会默认带上 qq.com 对应的 Cookie，不会带上 baidu.com 对应的 Cookie
   当请求 v.qq.com 下的资源时，浏览器不仅会带上 v.qq.com 的Cookie，还会带上 qq.com 的 Cookie
   另外 Cookie 还可以根据路径做限制，请自行了解，这个功能用得比较少。
6. 如何设置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";

7. 删除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

特点：

1. 将sessionId（随机数）通过Cookie发送给客户端
2. 客户端访问服务器时，服务器读取sessionId
3. 服务器有一块内存（哈希表）保存了所有session
4. 通过SessionId我们可以得到对应用户的隐私信息，如id等
5. 这块内存（哈希表）就是服务器上的所有session

SessionStorage

特点

1. SessionStorage跟HTTP无关
2. HTTP不会带上SessionStorage的值
3. 只有相同域名的页面才能互相读取SessionStorage
4. 每个域名SessionStorage最大存储量为5Mb左右
5. SessionStorage在用户关闭页面（会话结束）后失效

LocalStorage

特点

1.localStorage跟HTTP无关

2. HTTP不会带上localStorage的值
3. 只有相同域名的页面才能互相读取localStorage
4. 每个域名localStorage最大存储量为5Mb左右
5. 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）等跨页面存储内容的场景
6. localstorage理论上永久有效，没办法设置过期时间，除非用户清理缓存

全局对象

window.localStorage是一个名为Storage的全局对象，日常主要使用以下三个方法：

1. localStorage.getItem(key): 获取指定key本地存储的值。
2. localStorage.setItem(key): 将value存储到key字段。
3. localStorage.remoteItem(key): 删除指定key本地存储的值。

本质

localStorage是html5提供的一个API，localStorage的实质是一个哈希。
localStorage只能存string，不能存函数对象等，存了也没用，会转化成string。
localStorage可以将内容存到C盘的文件里，以便以后使用。没有localStorage之前都不能这样操作。

session 是服务器上的哈希，localStorage 是浏览器上的哈希。

问题：cookie和localStorage为什么会放在一起比较

1. localStorage是一个HTML5新出的API，在这之前，跨页面的存储都是通过Cookie进行的
2. 但是Cookie进行跨页面存储需要带上一个字符串，大小在1k左右，但是一个请求才120B，这会使得请求变慢。localStorage不会拖慢请求速度。
3. Cookie和localStorage都是存储在C盘文件夹中，都可以进行长久化存储
4. 前端永远不要读写Cookie

面试题

1. cookie和session是什么关系？
   答：
   1.Cookie 保存在客户端，每次都随请求发送给 Server。
   2.Session 保存在 Server 的内存里，其 Session ID 是通过 Cookie 发送给客户端的

2. cookie和localstorage的区别是什么？
   答：
   1.最大的区别是cookie是HTTP协议的内容，cookie每次请求都会带给服务器，而local storage不会，因为跟HTTP无关。
   2.然后可以回答最大存储量的不同，Cookie的最大存储量是4k左右，而LocalStorage的最大存储量是5Mb左右。

3. localstorage和session storage的区别
   答： sessionstorage在用户关闭页面（会话结束）后失效。local storage永久有效，除非用户清理缓存。

4. Cache-Control: max-age=1000 缓存 与 ETag 的「缓存」有什么区别？
   答：
   1.Cache-Control: max-age=1000缓存 : 指在1000秒内，不去向服务器进行请求，直接在缓存中拿到文件。
   2.ETag的「缓存」： 指依旧想服务器进行请求，如果文件内容没有变化，即md5编码验证相等，则不去下载文件。

最大的区别就是Cache-Control: max-age=1000在一定时间内不发起请求，而Etag始终发起请求，但不一定需要下载文件。