浏览器缓存机制

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

HTTP 缓存机制

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

浏览器本地贮存

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

<!– | 用处 | 权限验证等 –>

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