浏览器的存储与缓存

开发过程中，我们经常会听到一SessionStorage,LocalStorage,Cookies,缓存,最开始的时候我也傻傻分不清楚，什么是浏览器的存储？什么是浏览器的缓存？

浏览器的存储和浏览器的缓存是两种不通机制

1.浏览器存储

浏览器存储主要用于持久化保存用户数据或应用状态，以便在页面刷新或关闭后仍然可以访问这些数据。

常用的有：

• Cookies

  • 小型文本文件，通常用于会话管理（如登录状态）或个性化设置。
  • 生命周期：可以通过设置 expires 或 max-age 属性控制其有效期，若未设置则为会话期（Session Cookie）。
  • 大小限制：每个 Cookie 最大 4KB。
  • 特点：每次 HTTP 请求都会将相关 Cookie 发送到服务器。

• Web Storage (LocalStorage 和 SessionStorage)

  • LocalStorage: 数据无过期时间，除非手动清除，适合长期存储。
  • SessionStorage: 数据仅在当前会话有效，关闭浏览器标签页后自动清除。
  • 生命周期：LocalStorage 永久存储；SessionStorage 会话期存储。
  • 大小限制：通常每个域名约 5MB。
  • 特点：数据不会随 HTTP 请求发送到服务器。

• IndexedDB

  • 更强大的本地数据库，支持存储大量结构化数据。
  • 生命周期：永久存储，直到被显式删除。
  • 大小限制：通常较大，具体取决于浏览器实现。
  • 特点：异步操作，适合复杂数据结构和大数据量。

• FileSystem API

  • 提供对本地文件系统的访问权限（需用户授权），可用于存储文件或目录。
  • 生命周期：根据用户授权和存储方式决定。
  • 特点：适合需要本地文件操作的应用。

2. 浏览器缓存

浏览器缓存的主要目的是优化性能，减少重复请求，加快网页加载速度。

常见类型：

• HTTP 缓存

  通过响应头 Cache-Control的值来控制缓存策略，no-cache触发协商缓存，no-store表示不做缓存缓存， max-age=<seconds>指定资源的有效时间（单位为秒）。

  • 强缓存：浏览器直接使用本地缓存资源，无需与服务器进行任何通信，通过控制Cache- Control和max-age来控制资源的有效时间或者用Expires 指定资源的过期时间。
  • 协商缓存：当强缓存失效时，浏览器会向服务器发送请求以验证资源是否更新。使用 Last-Modified来标记服务器返回资源的最后修改时间，浏览器在下次请求时将其作为 If-Modified-Since 发送给服务器，如果资源未更改，服务器返回 304 Not Modified，否则就返回200，如果服务的的修改在秒级别内，使用Last-Modified和If-Modified-Since就无法检测到浏览器的更新， 服务器需要生成一个唯一的标识符（ETag），浏览器将其保存并与下次请求一起发送（If-None-Match）。
  • 特点：缓存的是静态资源（如图片、CSS、JS 文件等），可显著减少网络流量。

• Service Worker 缓存

  • 使用 Service Worker API 实现的离线缓存机制，允许开发者自定义缓存逻辑。
  • 生命周期：由开发者控制，可通过代码清除或更新缓存。
  • 特点：支持离线功能，适合 PWA（渐进式 Web 应用）。

• 内存缓存

  • 存储在内存中的临时数据，关闭浏览器或标签页后会被清除。
  • 生命周期：短暂，仅在当前会话期间有效。
  • 特点：速度快，但容量有限。

• 磁盘缓存

  • 存储在硬盘上的数据，适合较大的资源文件。
  • 生命周期：由浏览器缓存策略决定。
  • 特点：持久性较强，但读取速度较慢。

3. 主要区别

特性	浏览器存储	浏览器缓存
目的	保存用户数据或应用状态	加速资源加载，减少网络请求
数据类型	结构化数据（如键值对、对象等）	静态资源（如 HTML、CSS、图片等）
生命周期	根据存储类型决定（永久或会话期）	根据缓存策略决定
存储位置	内存或硬盘（视存储类型而定）	磁盘或内存
是否随请求发送	不会	可能（如 Cookies 随 HTTP 请求发送）
大小限制	较小（如 LocalStorage 5MB）	较大（视浏览器实现而定）