20190116 问:
前端的缓存有哪些？都适用什么场景？区别是什么？
参考回答
前端缓存分为两部分:
http 缓存
浏览器缓存
http 缓存
强缓存
强缓存主要是采用响应头中的 Cache-Control 和 Expires 两个字段进行控制的
Cache-Control 值理解:
max-age 指定设置缓存最大的有效时间 (单位为 s) public 指定响应会被缓存，并且在多用户间共享 private 响应只作为私有的缓存，不能在用户间共享 no-cache 指定不缓存响应，表明资源不进行缓存 no-store 绝对禁止缓存
Expires 理解:
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点, 需要和 Last-modified 结合使用
Last-modified 理解
服务器端文件的最后修改时间，需要和 cache-control 共同使用，是检查服务器端资源是否更新的一种方式
ETag 理解
根据实体内容生成一段 hash 字符串，标识资源的状态，由服务端产生。浏览器会将这串字符串传回服务器，验证资源是否已经修改
协商缓存 (304)
协商缓存是指当强缓存机制如果检测到缓存失效，就需要进行服务器再验证
浏览器缓存
Cookie
LocalStorage
SessionStorage
Service Worker
Cookie
Cookie 主要用于用户信息的存储, 容量为 4KB
LocalStorage
LocalStorage 的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止, 容量为 5MB
SessionStorage
SessionStorage 的其他属性同 LocalStorage, 不同是的当页面关闭时会随之清除
Service Worker
主要是为了提高 web app 的用户体验，可以实现离线应用消息推送等等一系列的功能, 可以看做是一个独立于浏览器的 Javascript 代理脚本, 在离线状态下也能提供基本的功能。出于安全性的考虑，Service Worker 只能在 https 协议下使用
往期
每日一题: 元素水平垂直居中的方式有哪些？
关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
加入 JS 每日一题