直接用 localstorage 缓存菜单结构可避免重复递归查询，关键在于安全存储（校验+版本+时间戳）、读取时基础校验（过期/版本/解析异常）、配合服务端轻量标识保障一致性、并添加自动清理机制。
直接用 localStorage 缓存导航菜单结构，能避免每次页面加载都向后端发起递归查询（比如查一级菜单、再查子菜单、再查孙菜单），尤其适合权限固定、更新不频繁的后台系统或企业内网应用。
关键点不是“能不能存”，而是“怎么存得安全、可维护、不过期” —— 因为菜单结构一旦缓存错误或长期不更新，用户可能看到旧权限、缺失新功能入口。
一、缓存菜单数据本身：只存结构，不存 DOM
后端返回的菜单通常是扁平化数组（含 id、parentId、name、url 等字段）或已组装好的树形 JSON。
前端拿到后，先校验、再序列化、再存入 localStorage：
// 假设后端返回 { code: 0, data: [...] }
if (res.code === 0 && Array.isArray(res.data)) {
const menuData = res.data;
// 可选：加时间戳和版本号，便于后续判断是否过期
const cacheObj = {
version: 'v2.3', // 与后端约定的菜单结构版本
timestamp: Date.now(),
data: menuData
};
localStorage.setItem('menu-structure', JSON.stringify(cacheObj));
}
⚠️ 注意：不要直接存未处理的响应对象（如含
Date、function、循环引用），否则JSON.stringify()会失败或丢数据。
二、读取时优先用缓存，但必须做基础校验
页面初始化时，别急着发请求，先尝试读本地缓存：
function getMenuFromCache() {
const cached = localStorage.getItem('menu-structure');
if (!cached) return null;
try {
const parsed = JSON.parse(cached);
// 检查是否过期（例如：超过 24 小时强制刷新）
if (Date.now() - parsed.timestamp > 24 * 60 * 60 * 1000) {
return null;
}
// 检查版本是否匹配（后端升级菜单字段时可主动失效旧缓存）
if (parsed.version !== 'v2.3') {
return null;
}
return parsed.data;
} catch (e) {
// 解析失败（数据损坏/被篡改），清除并返回 null
localStorage.removeItem('menu-structure');
return null;
}
}
const cachedMenu = getMenuFromCache();
if (cachedMenu) {
renderMenu(cachedMenu); // 直接渲染
} else {
fetchMenuFromServer(); // 再走接口
}
三、配合服务端做轻量级一致性保障
纯前端缓存有风险，建议后端在菜单接口加一个轻量标识，比如：
- 返回头带
X-Menu-ETag: "abc123" - 或响应体里多一个字段
"cacheKey": "menu-v2-20260430"
前端可把该 key 存进 localStorage，下次请求前先比对：
const lastKey = localStorage.getItem('menu-cache-key');
if (lastKey === 'menu-v2-20260430') {
// 跳过请求，直接用缓存
} else {
// 请求新数据，并更新 cacheKey 和 menu-structure
}
这样既免去递归查库，又避免“永远不更新”。
四、自动清理机制防止缓存堆积
菜单结构虽小，但若叠加其他缓存（如用户配置、搜索历史），容易触达 5–10MB 上限。
可加简单清理逻辑，比如：
- 每次存新菜单时，检查
localStorage.length是否 > 50 个键； - 或统一用前缀（如
menu-*、user-*），定期调用：
function clearMenuCache() {
Object.keys(localStorage)
.filter(k => k.startsWith('menu-'))
.forEach(k => localStorage.removeItem(k));
}
上线新版本或用户登出时主动调用，干净可控。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
