【无标题】前端缓存

前端缓存

常用缓存
localStorage本地浏览器缓存，多页使用
sessionStorage单页面缓存，临时存储，因其存储的数据只存在当前的浏览器标签页，比localStorage安全性高
只能缓存5M 的数据
cookie只能缓存4kb的数据
接下来重点介绍http缓存：
Cache-control实现强缓存，

//往响应头中写入需要缓存的时间
res.writeHead(200,{
    'Cache-Control':'max-age=10'
});

Cache-Control:max-age=N，N就是需要缓存的秒数。从第一次请求资源的时候开始，往后N秒内，资源若再次请求，则直接从磁盘（或内存中读取），不与服务器做任何交互。

Cache-control有max-age、s-maxage、no-cache、no-store、private、public这六个属性。

• max-age决定客户端资源被缓存多久。
• s-maxage决定代理服务器缓存的时长。
• no-cache表示是强制进行协商缓存。
• no-store是表示禁止任何缓存策略。
• public表示资源即可以被浏览器缓存也可以被代理服务器缓存。
• private表示资源只能被浏览器缓存。

如何设置缓存

从前端的角度来说:

你什么都不用干，缓存是缓存在前端，但实际上代码是后端的同学来写的。如果你需要实现前端缓存的话啊，通知后端的同学加响应头就好了。

总结一下

http缓存可以减少宽带流量，加快响应速度。
关于强缓存，cache-control是Expires的完全替代方案，在可以使用cache-control的情况下不要使用expires
关于协商缓存,etag并不是last-modified的完全替代方案，而是补充方案，具体用哪一个，取决于业务场景。
有些缓存是从磁盘读取，有些缓存是从内存读取，有什么区别？答：从内存读取的缓存更快。
所有带304的资源都是协商缓存，所有标注（从内存中读取/从磁盘中读取）的资源都是强缓存。