cookie 、sessionStorage、localStorange、http缓存 、indexDB
cookie
由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie最多能存储4K数据，它的生存时间由expires属性指定，并且cookie只能被同源的页面访问共享。
localStorage
html5 提供的一种浏览器本地存储的方法，它一般也能够存储5M或者更大的数据。它和sessionStorange不同的是，除非手动删除它，否则它不会失效，并且localStorage也只能被同源页面所访问共享。
SeeionStorange
html5 提供的一种浏览器本地存储的方法，它借鉴了服务端session的概念，代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据，它在当前窗口关闭后就失效了，并且sessionStorange只能被同一个窗口的同源页面所访问共享。
http缓存：
优点：主要通过请求头和响应头的信息，来控制缓存的策略。它的优点有缩短网页请求资源的距离，减少延迟、节省流量，由于缓存文件可以重复利用，减少服务器的压力，提高客户端的响应。
缺点：缓存可能导致用户看到过期的内容，需要使用版本号或者文件指纹来解决。如果缓存策略不当，可能会造成资源更新后用户无法及时获取最新内容。
浏览器缓存分为：强缓存200、协商缓存304
区别： 强缓存不向服务器发送请求，协商缓存会发送请求至服务器
相同点：若命中，都直接从浏览器缓存加载资源，不从服务器加载资源
由响应头来控制缓存 ：
强缓存：Expired 、catch-Control
浏览器在请求资源时，先检查该资源的缓存标识（例如Expires、Cache-Control的max-age等），如果该资源在缓存有效期内，则直接使用缓存，不会向服务器发起请求。
协商缓存:(请求头+响应头) ：Last-Modifired 、Etag
当资源的缓存过期或者需要验证时，浏览器会向服务器发送请求，服务器会根据资源的最后修改时间（Last-Modified）或者资源的唯一标识（ETag）来判断资源是否有更新。
强缓存的资源存储位置
| 状态 | Network - Size | 含义 |
|---|---|---|
| 200 | from memory cache | 不请求网络资源，资源在内存， 一般是脚本、字体、图片，浏览器关闭，数据将被释放 |
| 200 | from disk cache | 请求网络资源，资源在磁盘， 一般是css等，关闭数据还在 |
| 200 | 资源大小 | 从服务器下载最新资源 |
| 304 | 报文大小 | 请求服务端发现资源未更新，使用本地资源 |
用户行为对强缓存和协商缓存的影响
| 用户操作 | Expires/cache-control | Last-modified/Etag |
|---|---|---|
| 地址栏回车 | 有效 | 有效 |
| 页面链接跳转 | 有效 | 有效 |
| 新开窗口 | 有效 | 有效 |
| 前进回退 | 有效 | 有效 |
| f5刷新 | 无效 | 有效 |
| ctrl+f5强制刷新 | 无效 | 无效 |
