浏览器缓存有多种形式，持久化或者会话存储。以chrome为例，打开调试面板，找到Application选项卡，就可以看到它所支持的各种缓存模式，如下图：
chrome application.png
上图没有http缓存（因为它体现在请求头，在Network选项卡查看更为合适），其实，这恰巧是利用缓存做前端性能优化的重要方法，所以，把它也纳入浏览器缓存表格，并且在文章末尾附加详细的流程图。
| 缓存方式 | 详解 | 使用情况 |
|---|---|---|
| http缓存 | 分为强缓存（200）和协商缓存（304），详细流程参考下图 | 强烈推荐 |
| localstorge | 本地缓存 单个域名下有大小限制（最大5M） 同一域名多个页面共享 |
推荐 |
| sessionstorage | 本地缓存 页面关闭时清空 |
不推荐 |
| cookie | 不支持跨域（同localstorge） 可通过设置 domain和path实现共享域名分为session cookie（关闭浏览器清空）和持久性cookie（定义有效期） httponly设置为true时，JS无法获取cookie值常用于身份验证（逐渐被token替代） |
可以用用 |
| webSQL | 非HTML5规范，是一种特定的浏览器特性 集成在浏览器中的本地数据库 类似NoSQL数据库 |
不推荐 |
| indexDB | HTML5规范 50M限制 浏览器支持情况不佳 |
还需等等 |
| Application Cache | 通过manifest配置文件在本地有选择性的存储JS/CSS/图片等静态资源 存储大小：5M 静态资源必须和HTML文件同源 逐渐被 Service Worker替代 |
不推荐 |
| Cache Storage |
ServiceWorker 规范中定义的离线方案设置window全局内置对象 caches浏览器兼容性较差 |
还需等等 |
小贴士：
serviceWorker：和webWorker一样是在浏览器后台作为独立线程运行的JavaScript脚本。通过message/postMessage方法在页面直接通信。
下图为http缓存流程图：
浏览器缓存.png
协商缓存并非是一种被强缓存“低级”的策略，对于一些特殊的应用场景或资源，协商缓存优于强缓存。
比如，单页面项目中，每次发布JS和CSS文件都可能发生变化（通过在文件名上加hash来指定变化），那么，必须保证每次请求到的HTML文件必须是最新的。为了便于服务器解析和网站地址的唯一性，我们又不能在HTML文件上应用hash指纹。在这种场景下，就只能使用协商缓存了。
