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强制刷新 | 无效 | 无效 |