1. 浏览器缓存的种类
cookie localStorage和sessionStorage memory cache 和 disk cache 还有其他一些浏览器缓存,如WebSQL、IndexDB等等,不常用就不分析了。2. 浏览器缓存特点分析
2.1. cookie缓存
cookie缓存由服务器端生成,一般用来保存session信息,只要设计合理,一般不会带来一致性问题。2.2. localStorage 和 sessionStorage
localStorage是永久缓存,如果升级前端程序涉及缓存键值改变,应在页面加载时调用清理或重新设置缓存内容的JS代码。 sessionStorage是跟随当前浏览器窗口的数据缓存,关闭重新打开浏览器会自动清空。2.3. memory cache 和 disk cache
memory cache是浏览器内部控制的,无法改变,一般也不会带来副作用。 disk cache是重点关注的浏览器端的资源文件缓存。3. 控制disk cache
Http Response Headers中通过cache-control来控制浏览器采取不同的缓存策略。响应头参数可以通过Web服务器来配置。这里以Nginx的配置文件为例。3.1. private(默认)
server { ... add_header Cache-Control private; (或者不设置,默认为private) ...}
![缓存是什么意思(浏览器缓存特点分析)](https://www.63fl.com/wp-content/uploads/2021/11/2021111615024987.gif)
![缓存是什么意思(浏览器缓存特点分析)](https://www.63fl.com/wp-content/uploads/2021/11/2021111615024987.gif)
3.2. no-cache(推荐)
server { ... add_header Cache-Control no-cache; ...}
![缓存是什么意思(浏览器缓存特点分析)](https://www.63fl.com/wp-content/uploads/2021/11/2021111615024987.gif)
![缓存是什么意思(浏览器缓存特点分析)](https://www.63fl.com/wp-content/uploads/2021/11/2021111615024987.gif)
3.3. no-store
server { ... add_header Cache-Control no-store; ...}
![缓存是什么意思(浏览器缓存特点分析)](https://www.63fl.com/wp-content/uploads/2021/11/2021111615024987.gif)
![缓存是什么意思(浏览器缓存特点分析)](https://www.63fl.com/wp-content/uploads/2021/11/2021111615024987.gif)