深刻理解浏览器缓存机制

浏览器缓存机制

前端缓存分为网络(HTTP)缓存和浏览器本地储存。

HTTP 缓存机制

请移步：网络协议-HTTP-缓存缓存机制

浏览器本地储存

咱们先来经过表格学习下这几种存储方式的区别

特性	Cookie	localStorage	sessionStorage	indexedDB
数据声明周期	通常由服务器生成，能够设置过时时间	除非被清理，否在一直存在	页面关闭就清理	除非被清理，否在一直存在
数据储存大小	4k	5M 左右	5M 左右	理论无限
与服务端通讯	请求时会携带在 Http 的 header 中，对于请求性能稍有影响	不参与	不参与	不参与

<!-- | 用途 | 权限验证等 -->

Cookie

主要用于存储一下用户相关的信息，如登陆、权限、token 等，可是不宜过大，由于每次 http 请求都会带上，因此会稍微影响性能。
对于 cookie 来讲，还须要注意一些安全性。

| 属性 | 做用 |
| value | 如何用于保护用户登陆态，应该将值加密 |
| http-only | 不能经过 JS 访问 Cookie，减小 XSS 攻击 |
| secure | 只能在协议为 HTTPS 的请求中携带 |
| same-site | 规定浏览器不能再跨域请求中携带 Cookie，减小 CSRF 攻击 |

Cookie 的本职工做并不是是本地存储，而是“维持状态”。
由于 HTTP 是一种无状态的协议，也就是说，客户端请求一次，服务端就响应一次，中间没有留下任何信息。
就像一个常常和你聊天的朋友，天南地北的都什么都聊，可每次你都不知道大家上一次聊得是什么，以及他叫什么名字。
那怎么办才能让他知道我是我呢？
这时候就须要 Cookie 了，Cookie 说白了就是一个存储在浏览器里的一个小小的文本文件，它附着在 HTTP 请求上，在浏览器和服务器之间“飞来飞去”。
它能够携带用户信息，当服务器检查 Cookie 的时候，即可以获取到客户端的状态，也就能够证实我是谁了。
Cookie 是以键值对的形式存储的。

优势

• 后端设置
• 解决鉴权问题

缺点

• 只有 4m，过小
• 过量的 Cookie 会带来巨大的性能浪费
• 不能跨域

Web Storage

localStorage

• 本地永久储存，除非手动清除，否在一直存在
• 大小：5M 左右
• 用于储存稳定的资源：如 CSS、js、小图等。

sessionStorage

• 页面回话存储，关闭页面自动清除。
• 大小：5M 左右
• 用于临时的数据：如 token、我的信息、权限、购物车信息等

须要注意的是localStorage和sessionStorage都是遵循同源策略的：

• • localStorage只要在相同的协议、相同的主机名（二级域名也不行）、相同的端口下，就能读取/修改到同一份localStorage数据。

    • sessionStorage比localStorage更严苛一点，除了协议、主机名（二级域名也不行）、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

使用

• 存储数据：setItem()
  localStorage.setItem('user_name', 'xiuyan')
• 读取数据： getItem()
  localStorage.getItem('user_name')
• 删除某一键名对应的数据： removeItem()
  localStorage.removeItem('user_name')
• 清空数据记录：clear()
  localStorage.clear()

indexedDB

IndexedDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。

理论上来讲，IndexedDB 是没有存储上限的（通常来讲不会小于 250M）。它不只能够存储字符串，还能够存储二进制数据。

本人用的也不是不少，具体用法能够参考：浏览器数据库 IndexedDB 入门教程

PWA

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式加强策略来建立跨平台 Web 应用程序。

这些应用无处不在、功能丰富，使其具备与原生应用相同的用户体验优点。 这组文档和指南告诉您有关 PWA 的全部信息。

其实个人理解，就是在浏览器或者其余客户端应用缓存一个 webapp，一次使用，就将代码都缓存到本地，再次打开无需重复加载。

是否是以为很熟悉，这不就是微信小程序吗？

其实如今的微信小程序、快应用都算是一种 PWA 的实现。

好比：vuePress 就支持转 PWA 应用

参考：MDN-PWA