下面给你一份 前端常见的数据缓存方案及其实现细节（超完整总结），涵盖浏览器端所有主流缓存方式，并给出优缺点、使用场景、代码示例与注意点。
内容结构：
- 前端缓存的核心分层
- 7 大常用缓存方案
- 各方案优缺点对比
- 常见的缓存架构最佳实践（含 Vue / React ）
✅ 1. 前端缓存的核心分层
前端缓存可分为四大层：
| 层级 | 技术 | 描述 |
|---|---|---|
| HTTP 缓存层 | Cache-Control / ETag | 浏览器自动缓存资源（HTML/CSS/JS/图片） |
| 内存缓存 | JS 变量、Vue/React 状态管理 | 页面刷新即消失，但最快 |
| 本地存储 | localStorage / sessionStorage | 简单的 key-value 存储 |
| 持久化缓存 | IndexedDB / CacheStorage | 存大量结构化数据、离线能力最强 |
✅ 2. 前端常见七大缓存方案
① HTTP 缓存（强缓存 + 协商缓存）
浏览器原生机制，主要针对静态资源。
强缓存（直接返回缓存，不发请求）
Cache-Control: max-age=31536000Expires: xxx
协商缓存（向服务端确认是否过期）
ETag / If-None-MatchLast-Modified / If-Modified-Since
✔ 优点：性能最佳，省流量
✘ 缺点：前端无法精准控制，只适用于静态文件
② 内存缓存（Memory Cache）
存储在内存，页面关闭后消失：
典型场景
- Vue 中的
store（pinia/vuex） - React 中的
useState/useContext - 全局 JS 对象缓存
示例
const cache = {};
function getData() {
if (cache.data) return Promise.resolve(cache.data);
return fetch('/api/data').then(res => {
cache.data = res;
return res;
});
}
✔ 优点：最快速、零 IO
✘ 缺点：刷新页面就没了
③ localStorage（永久保存）
localStorage.setItem("token", "123456");
localStorage.getItem("token");
localStorage.removeItem("token");
特点
- 永久保存，除非用户手动清除
- 大约 5MB 大小
- 同步 API（会阻塞主线程）
✔ 用于持久数据：token、用户偏好设置
✘ 不适合存大量数据（同步阻塞）
④ sessionStorage（会话级别缓存）
sessionStorage.setItem("step", "2");
特点：
- 标签页级别独立
- 页面关闭即失效
✔ 适合：表单分步骤填写、临时状态保持
✘ 和 localStorage 一样是同步 API
⑤ Cookie（带自动附加功能）
前端：
document.cookie = "id=123; max-age=3600; path=/";
服务端响应头：
Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Lax
特点：
- 会自动随请求发送到服务端
- 有过期时间
- 4KB 左右
✔ 最适合：sessionID、简单 token
✘ 不适合存大量数据
⑥ IndexedDB（浏览器数据库，适合大量数据）
适用场景：大数据结构化存储、离线应用。
示例（简化版）
const dbRequest = indexedDB.open("MyDB", 1);
dbRequest.onupgradeneeded = function() {
const db = dbRequest.result;
db.createObjectStore("users", { keyPath: "id" });
};
dbRequest.onsuccess = function() {
const db = dbRequest.result;
const tx = db.transaction("users", "readwrite");
tx.objectStore("users").put({ id: 1, name: 'Tom' });
};
✔ 优点
- 异步、性能好、不阻塞
- 基本没有容量限制（GB 级别）
- 适用于大型离线项目（如 PWA）
✘ 缺点
- API 繁琐，需要封装
⑦ Cache API（PWA、Service Worker 离线缓存）
主要用于缓存请求响应，与 HTTP 缓存配合使用。
示例：缓存网络请求
caches.open("v1").then(cache => {
cache.add("/api/user");
});
Service Worker 中使用：
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request).then(resp => resp || fetch(event.request))
);
});
✔ 超强离线能力
✔ 可缓存整个网站
✘ 需要 Service Worker 配置
✅ 3. 各缓存方式对比（最实用表格）
| 缓存类型 | 持久性 | 容量 | 是否阻塞 | 是否随请求发送 | 使用场景 |
|---|---|---|---|---|---|
| Memory | 页面生命周期 | 几 MB | 快 | 否 | 状态管理、页面变量 |
| localStorage | 永久 | ~5MB | 阻塞 | 否 | token、偏好设置 |
| sessionStorage | 会话 | ~5MB | 阻塞 | 否 | 表单临时缓存 |
| Cookie | 可设 | 4KB | 少量阻塞 | ✔ 会自动发送 | 登录 session |
| IndexedDB | 永久 | 数百 MB~GB | 异步 | 否 | 大量数据、离线 |
| Cache API | 永久 | 大 | 异步 | 否 | PWA 离线缓存 |
| HTTP Cache | 浏览器控制 | 大 | – | – | 静态资源优化 |
✅ 4. 前端缓存最佳实践（实战方案）
🌟 方案 A：接口缓存（常用于 Vue/React）
async function fetchWithCache(key, url) {
const cache = localStorage.getItem(key);
if (cache) return JSON.parse(cache);
const res = await fetch(url).then(r => r.json());
localStorage.setItem(key, JSON.stringify(res));
return res;
}
🌟 方案 B：Vue 项目中使用 “多级缓存架构”
推荐模式：内存 > localStorage > IndexedDB
流程：
用户访问 → 内存有？ → localStorage 有？ → IndexedDB 有？ → 请求服务器
🌟 方案 C：React 项目中使用 SWR 或 React Query（自动缓存）
import useSWR from "swr";
const { data } = useSWR("/api/user", url => fetch(url).then(r => r.json()));
✔ 内存缓存
✔ 缓存过期
✔ 自动重试
✔ 失效刷新
这是前端最佳缓存方案之一。
🎯 总结（可复制）
前端缓存方案可分为 7 大类：
- HTTP 缓存（静态资源）
- Memory Cache（速度最快）
- localStorage（永久缓存）
- sessionStorage（会话级别）
- Cookie（随请求发送）
- IndexedDB（大量数据 + 离线）
- Cache API（PWA 级别离线）
项目建议使用 多级缓存体系，根据场景灵活搭配：
✔ 轻量数据 → localStorage
✔ 表单状态 → sessionStorage
✔ 登录状态 → Cookie / localStorage
✔ 大规模数据 → IndexedDB
✔ 离线应用 → Cache API
发表回复