浏览器缓存有多种形式，持久化或者会话存储。以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
网友评论