Cookie：

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

Session：

是存在服务器的一种用来存放用户数据的类HashTable结构。原理：当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含session id，则为此客户端创建一个session并且生成一个与此session相关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止，则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。

二者的不同：

1、session 在服务器端，cookie 在客户端（浏览器）
2、session 默认被存在在服务器的一个文件里（不是内存）
3、session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 session_id）
4、session 可以放在 文件、数据库、或内存中都可以。
5、用户验证这种场合一般会用 session

---

localStorage：

生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage：

仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

二者的不同：

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

localStorage、sessionStorage、Cookie共同点：都是保存在浏览器端，且同源的。

---

ApplicationCache:

优点：进行离线存储；加快访问速度；减少服务器的负载。
使用：1、定义manifest文件， 名字自定义 后缀自定义， 建议后缀appcache；
2、在html中使用属性manifest="demo.appcache"引入 manifest文件

文件(demo.appcache)：

localStorage、ApplicationCache都是html5离线存储的新特性。

---

Cache-Control:

基于浏览器的缓存机制，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。见下面第四个参考。

其他:

除了本地，还有CDN缓存以及nginx缓存，这两种缓存并非前端去实现了。

---

参考：https://segmentfault.com/a/1190000012057010
https://www.cnblogs.com/wswang/p/6062461.html
https://www.jianshu.com/p/42e26e4f4ce3
https://segmentfault.com/a/1190000008377508?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly