前端到底怎样来操作或者说设置缓存？

Question

问一个好像很搞笑的问题，就是前端到底怎样来操作或者说设置缓存？搜索了一波，都在给科普缓存的字段什么意思，没有一个说到前端到底如何设置缓存，我的头都大了。懂的朋友麻烦告诉我好吗？谢谢了。

Answer 1

缓存分多种，他们说的是 http 缓存，那看来不是你要的。

楼上有个评论说了 Service Workers，这个是 http 前的一个缓存地，除了能拦截 http，也能接收一些 message 。

再往前说，就是 webSql、DB、localStorage、cookie 这些本地缓存了，也可以理解为持久化缓存。

再往前说，就是直接内存缓存了

以上就是和前端相关所有缓存了

Answer 2

缓存是个很复杂的东西，从后往前可以分为很多层级：

1. 数据层的缓存
2. CDN/网关层的缓存

3. 浏览器缓存

   1. 浏览器缓存内部又可以分成内存、硬盘等
4. 开发者主动 service worker 控制缓存

实际上通常来说，前端并不需要手动控制缓存，至少在我有限的开发生涯里，需要手动控制缓存的场景极少。

前端要做的，是合理使用缓存。比如：

1. 知道构建产生的 hash 值就是用来合理使用缓存的；
2. 所以构建产生的 html 不应该缓存；
3. 静态资源应该尽量独立，这样可以更好的利用缓存；
4. URL 里的 search 部分可以帮助缓存

Answer 3

响应头里控制基本的网络缓存，除非业务有特别需求，不然前端不需要手动缓存任何内容。

前端的缓存不具有及时性，远不如服务端返回一个304简单高效。

一旦有前端缓存的需求，在开发前肯定会被单独提出来，不可能让你自己领悟哪里需要缓存哪里不需要缓存。

Answer 4

不要混淆缓存和存储，localStorage、SessionStorage、IndexedDB 等等之类的是存储，不是缓存，存储的意思是你可以用代码去操作的一片存储空间，你可以用来做缓存，但是需要用代码实现，不是浏览器已经实现的缓存方案。

再说缓存，比如静态资源缓存，用来缓存CSS、JS、图片之类的资源，这个缓存可以用响应头实现，就是服务端发送到客户端的 Response Header ，里面有一个 Cache-Control 字段，用来控制缓存方案、过期时间等等，应该就是你说的网上介绍的各种字段。

另外就是ServiceWorker，这是另外一套方案，用于PWA应用，简单来说就是实现一个拦截器去缓存各种请求。

Answer 5

缓存跟前端技术没啥关系，是浏览器跟服务器行为，只要服务器nginx设置cache就行。具体怎么设置，有cache，etag等等。 cache就是纯浏览器缓存，etag是304。