三个响应头

登录注册

Cookie 是什么

1. Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。
2. 浏览器需要保存这段数据，不得轻易删除。
3. 此后每次浏览器访问该服务器，都必须带上这段数据。
   4.Cookie默认在用户关闭页面后就失效，后台代码可以任意设置Cookie的过期时间
   5.大小在4k以内

Cookie有啥用

第一个作用是识别用户身份。
比如用户 A 用浏览器访问了知乎，那么知乎的服务器就会立刻给 A 返回一段数据「uid=1」（这就是 Cookie）。当 A 再次访问 知乎的其他页面时，就会附带上「uid=1」这段数据。
对于B可能分配「uid=2」这段数据。
借此，知乎的服务器就能区分 A 和 B 两个用户了。
第二个作用是记录历史。
淘宝是一个购物网站，当 A 在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为「uid=1; cart=A1,A2」，表示购物车里有 A1 和 A2 两样商品了。
这样一来，当用户关闭网页，再打开网页的时候，依然可以看到 A1、A2 躺在购物车里，因为浏览器并不会无缘无故地删除这个 Cookie。
问题：
我在 Chrome 登录了得到 Cookie，用 Safari 访问，Safari 会带上 Cookie 吗

no

Cookie 存在哪
Windows 存在 C 盘的一个文件里
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会被用户篡改吗？
可以，会讲 Session 来解决这个问题，防止用户篡改。

Session

image.png
image.png

1.服务器通过Cookie发给客户端一个SessionID（随机数）
3.服务器有一块内存（哈希表）保存了所有的session
2.客户端访问服务器时，服务器读取SessionID
4.通过SessionID我们可以得到对应用户的信息，如id、email

image.png

不管存啥都变成字符串包括object，这里第四行localStorage.setItem(Object,{name:'obj'})结果在applaction里面看到是:[object Object]
所以用jason来存

localStorage.setItem('jsonString',JSON.stringify({name:'obj'}))

结果

取值如下：

image.png

具体什么作用：localstaorage不存在页面里面，是存在c盘的一个文件里面的，在它之前前端是没有记忆力的

实现刷新自增长
实现只提示一次

一些特点：
1.LocalStorage跟HTTP无关
2.HTTP不会带上LocalStorage的值
3.只有相同域名的页面才能互相读取LocalStorage（没同源那么严格）
4.每个域名LocalStorage最大储存量为5Mb左右（每个浏览器不一样）
5.常用场景：记录有没有提示过用户（不重要的信息，不能记录密码）
6.LocalStorage永久有效，除非用户清理缓存

SessionStorage（会话存储）
1.SessionStorage跟HTTP无关
2.HTTP不会带上SessionStorage的值
3.只有相同域名的页面才能互相读取SessionStorage（没同源那么严格）
4.每个域名SessionStorage最大储存量为5Mb左右（每个浏览器不一样）
前四条和localstorage一样，除了sessionstorage会过期
5.SessionStorage在用户关闭页面（会话结束）后就失效

面试题：
请问cookie和session什么关系？
sessio是基于cookie实现的
cookie和localstorage的区别是什么？
localstorage和http无关，不需要在访问服务器时候带上它；还有存储量不同。前端不要写cookie
localstorage和sessionstorage区别？
失效情况不一样，前者在我们清理缓存的时候失效，后者在会话结束的时候失效
sessionstorage和session也没有任何关系

性能优化知识点，如何处理HTTP缓存，让css和js请求变快：

1.cache-control
response.setHeader('Cache-Control','max-age=30')通过设置Cache-Control以后，30秒内，浏览器就不会再次请求了。（一般都是设置一年以上的Cache-Control）
原理是Chrome在30s内请求同样的url，那么Chrome就会阻断这个请求，所以Chrome直接在它的内存里面返回上一次的main.js，那个请求没有发请求。过了30s请求main.js,浏览器会说这次给你个新的，再保存30s，重复上面的过程。

如图
在首页设置
首页不可以设置缓存，如果所有东西都设置了缓存，比如一天的缓存时间，那么这段时间用户无法获得更新的信息，有风险，留个入口

一般都是设置缓存时间很久，利用下面的手段更新缓存：

更改URL，在入口处（HTML文件里面 ）把URL变一下，跟以前的URL不一样，那么就不会使用缓存，浏览器就会到最新版。
比如在index.html入口文件里的link标签和script标签的地址名字改掉，
<link rel="stylesheet" href="./css/default.css">改成<link rel="stylesheet" href="./css/default.css?v=3">,<script src="./js/main.js"></script>改成<script src="./js/main.js?v=2"></script>。以后需要在变更代码只需要把URL修改即可。
浏览器会自动清理缓存，它们自己权衡的，因为给你存缓存的地方就那么大，就算定了十年也可以提前清理

2.Expires

十几年前用的，但是面试官喜欢问

response.setHeader('Expires','Wed, 21 Oct 2015 07:28:00 GMT')
这个是到指定时间过期，而cache-control是过了多久过期。Expires有个缺点：它是使用的是本地时间，如果用户修改电脑的时间，那么Expires就不起作用了，不推荐。所有还是使用cache-control比较好。

last modified
ETag，
md5是一个摘要算法:内容差异越小，数值差异还是很大

image.png

nodejs有个md5的库，然后可以用它算md5值

image.png 结果 image.png

当这个请求的md5和服务器的不同在下载

image.png

区别：cache-control是直接不发送请求，而ETag是发送请求，但是如果md5相同就不下载，响应体是空的