前端基础进阶（二十六）：缓存=》浏览器缓存(cookie/webstorage/indexDB) http缓存 CDN缓存

一、cookie

来源：

Cookie 的本职工作并非本地存储，而是“维持状态”。
因为HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存，通俗来说，服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，于是就诞生了Cookie。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。
在刚才的购物场景中，当用户选购了第一项商品，服务器在向用户发送网页的同时，还发送了一段Cookie，记录着那项商品的信息。当用户访问另一个页面，浏览器会把Cookie发送给服务器，于是服务器知道他之前选购了什么。用户继续选购饮料，服务器就在原来那段Cookie里追加新的商品信息。结帐时，服务器读取发送来的Cookie就行了。

原理：

第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会在响应头里面添加一个Set-Cookie选项，将cookie放入到响应请求中，在浏览器第二次发请求的时候，会通过Cookie请求头部将Cookie信息发送给服务器，服务端会辨别用户身份，另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
Cookie的生成方式主要有两种：

• 生成方式一：http response header中的set-cookie
• 生成方式二：js中可以通过document.cookie可以读写cookie，以键值对的形式展示

应用场景：

cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。
典型的应用场景有：

• 记住密码，下次自动登录。
• 购物车功能。
• 记录用户浏览数据，进行商品（广告）推荐。

缺陷：

Cookie 不够大

Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。

过多的 Cookie 会带来巨大的性能浪费

cookie是用来维护用户信息的，而域名(domain)下所有请求都会携带cookie，但对于静态文件的请求，携带cookie信息根本没有用，此时可以通过cdn（存储静态文件的）的域名和主站的域名分开来解决。

由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。

CSRF(跨站请求伪造)攻击，这个也好解决，很多框架都屏蔽这个问题

有的客户端不支持cookie，需要手动设置，比如小程序

浏览器对cookie有限制，不能手动设置cookie，对于混合嵌套的开发有问题，比如小程序跳转H5页面，不能携带cookie

浏览器对单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie

Cookie与安全

HttpOnly 不支持读写，浏览器不允许脚本操作document.cookie去更改cookie，
所以为避免跨域脚本 (XSS) 攻击，通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端。如果包含服务端 Session 信息的 Cookie 不想被客户端 JavaScript 脚本调用，那么就应该为其设置 HttpOnly 标记。
标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。但即便设置了 Secure 标记，敏感信息也不应该通过Cookie传输，因为Cookie有其固有的不安全性，Secure 标记也无法提供确实的安全保障。

二、Web Storage

来源：

了弥补 Cookie 的局限性，让“专业的人做专业的事情”，Web Storage 出现了。

HTML5中新增了本地存储的解决方案----Web Storage，它分成两类：sessionStorage和localStorage。这样有了WebStorage后，cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。

• 共同点：都是保存在浏览器端，且都遵循同源策略。
• 不同点：在于生命周期与作用域的不同

作用域：localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下
sessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；sessionStorage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 sessionStorage 内容便无法共享；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。除了保存期限的长短不同，SessionStorage的属性和方法与LocalStorage完全一样。

三、indexDB

参考网址：
深入了解浏览器存储--从cookie到WebStorage、IndexedDB

四、session

来源：

1 cookie是一个非常具体的东西，指的就是浏览器里面存储的一种数据，仅仅是浏览器实现的一种数据存储功能。
2 由于cookie 是存在用户端，而且它本身存储的尺寸大小也有限，最关键是用户可以是可见的，并可以随意的修改，很不安全。那如何又要安全，又可以方便的全局读取信息呢？于是，这个时候，一种新的存储会话机制：session 诞生了。session信息存在于服务器端，所以也就很好的解决了安全问题。

原理：

应用场景：

五、token

来源：
session出现之后

原理：

参考网址；
彻底理解cookie session token
token、cookie和session三者的问题和解决方案

总结：
cookie->webstorage->indexDB是因为能存储数据的大小
cookie->session
1 cookie是存储在客户端的，有大小，跨平台，跨网站的限制，不安全。
session->token
1 session是由服务器生成的，服务器生成sessionid，有多少个用户服务器需要保存多少个sessionid,服务器压力较大
token只需要验证令牌是否正确，然后拿到用户的userid去操作

说说你对缓存的理解
浅谈http中的Cache-Control

缓存地址讲解：
前端基础进阶 浏览器的缓存机制
HTTP的缓存 和浏览器的本地存储

cdn缓存理解：
CDN缓存
CDN详解
cdn优化：
性能优化小册 - 提高网页响应速度：优化你的 CDN 性能
CDN小结

用了CDN缓存，就会跳过强缓存和协商缓存吗？
CDN的使用场景和操作细节