Cookie、LocalStorage、SessionStorage、IndexedDB 缓存

缓存

缓存是指将一些常用的数据存储在内存或者磁盘等介质中，以便在下次访问时能够快速获取，提高系统的性能。在前端开发中，使用缓存可以显著提高网站的性能和用户体验。常见的缓存包括 Cookie、LocalStorage、SessionStorage、IndexedDB 等。

• 浏览器缓存是浏览器在本地存储网页资源的一种机制，主要包括 HTTP 缓存和 Service Worker 缓存等
• 本地存储是指浏览器在客户端本地存储数据的一种机制，包括 localStorage、sessionStorage 和 IndexDB 等

在使用缓存的时候，常见的报错情况是缓存穿透和缓存雪崩，是开发中需要注意的。

• 缓存穿透指的是访问不存在的缓存数据，
• 缓存雪崩指的是缓存同时失效，导致大量请求直接打到数据库上，可以通过使用布隆过滤器、缓存预热等方式来预防和解决这些问题。

Cookie

Cookie 属于浏览器缓存中的HTTP缓存，是一种在浏览器和 Web 服务器之间传输的小型数据片段，用于存储用户身份验证信息、用户偏好设置和其他临时数据。

Cookie 可以通过设置过期时间来控制其在客户端上的存储时间。使用 Cache-Control、Expires 和 Etag 等相关的 HTTP 头部信息来控制缓存的更新和过期

Cookie 的主要优点是跨浏览器兼容性良好，并且可以在不同的页面和域名之间共享。

但是，Cookie 的容量有限，并且可能被恶意网站利用进行跨站点脚本攻击（XSS）

LocalStorage

LocalStorage 是一种 HTML5 Web 存储 API，允许在浏览器中存储较大的数据片段.

LocalStorage 中存储的数据不会过期，并且可以在同一个域名下的不同页面之间共享。

LocalStorage 可以在客户端上保持数据的状态，而不需要通过网络传输数据。

但是，LocalStorage 中存储的数据对于浏览器版本和升级可能会受到限制，并且在隐私保护方面存在一定的风险。

SessionStorage

SessionStorage 与 LocalStorage 类似，但是存储在其中的数据只在浏览器会话期间有效。

与 Cookie 不同，SessionStorage 中的数据不会随着每个 HTTP 请求而传输到服务器，因此 SessionStorage 更安全，并且可以存储更大的数据量。

SessionStorage 也受到浏览器版本和升级的限制。

IndexedDB

IndexedDB 是一种浏览器内置的数据库，允许在浏览器中存储大量的结构化数据。

IndexedDB 具有良好的性能和灵活性，并支持复杂的数据查询和索引。

IndexedDB 不受浏览器版本和升级的限制，但对于非结构化数据的存储可能会有些不适用。

常见面试题

1. 什么是 cookie？
2. 什么是缓存？
3. cookie 和缓存有什么区别和联系？
4. 什么是浏览器缓存？它有哪些类型？
5. 什么是本地存储？它有哪些类型？
6. cookie、浏览器缓存和本地存储有什么优缺点？
7. 如何清除浏览器缓存和本地存储？
8. 如何在前端代码中设置和读取 cookie？
9. 如何使用缓存来提高网站性能？
10. 如何处理缓存的更新和过期？
11. 什么是缓存穿透和缓存雪崩？如何预防和解决这些问题？