合理使用 localStorage 存储字典需结构化分键+版本号、异步初始化+兜底降级、服务端通知+多标签同步，并注意容量限制与安全脱敏。
用 localStorage 存储系统字典表（如：用户角色、状态枚举、地区编码、审批类型等）是常见优化手段，但关键不在“存”，而在“怎么存得合理、取得高效、更新不丢数据”。直接 JSON.stringify 一塞了事，往往导致后期维护难、缓存失效不及时、多标签页不同步等问题。
结构化存储：按业务域分键 + 版本号控制
别把所有字典塞进一个 key。应按逻辑拆分，每个字典独立存储，并带上时间戳或版本号，便于灰度更新和失效判断：
-
dict:role_v20241105—— 角色列表，含 id、code、name、sort -
dict:status_order_v20241105—— 订单状态，含 value、label、color、transitions -
dict:cache_meta—— 元信息，记录各字典最后更新时间、请求 URL、校验 hash（可选）
这样设计后，前端可精准刷新某类字典，不影响其他缓存；服务端发布新字典时，只需改版本号（如 v20241110），旧页面下次加载自动拉新，无须强制刷新。
初始化策略：启动时异步加载 + 降级兜底
页面首次加载不阻塞渲染。建议：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 先从
localStorage同步读取可用字典（快），立即用于下拉渲染、状态文案转换等 - 同时发起 API 请求获取最新字典（带 ETag 或 If-Modified-Since），若未变更则不更新本地缓存
- 若 localStorage 为空/损坏/过期，用内置轻量兜底数据（如 {0: '未知', 1: '启用', 2: '禁用'}），保障基础功能可用
示例伪代码：
const cached = localStorage.getItem('dict:status_order_v20241105');
if (cached) {
try {
window.DICT_STATUS = JSON.parse(cached);
} catch (e) {
window.DICT_STATUS = DEFAULT_STATUS;
}
} else {
window.DICT_STATUS = DEFAULT_STATUS;
}
fetch('/api/dict/status?_t=' + Date.now(), { headers: { 'If-None-Match': getETag() } })
.then(res => {
if (res.status === 200) return res.json();
})
.then(data => {
localStorage.setItem('dict:status_order_v20241105', JSON.stringify(data));
window.DICT_STATUS = data;
});
更新与同步：服务端通知 + 多标签页通信
字典变更不能只靠定时轮询。推荐组合方案：
- 后端在字典更新时，推送一条轻量消息（WebSocket / Server-Sent Events），通知前端“role 字典已升级”，前端触发重新 fetch 并更新对应 key
- 利用
storage事件监听同域下其他 tab 的 localStorage 变更：window.addEventListener('storage', e => { if (e.key.startsWith('dict:')) reloadDict(e.key); }); - 关键操作（如管理员修改字典）后，主动调用
localStorage.removeItem('dict:xxx')并触发重载，确保当前页立刻生效
安全与容量提醒
localStorage 单域名上限约 5–10MB（视浏览器而定），但实际建议单个字典 ≤ 500KB。超大字典（如全国三级行政区划）可做懒加载：
- 只存省级列表；选中某省后，再按需加载该省地市数据，并缓存为
dict:city_310000_v20241105 - 敏感字段（如“内部状态码”）避免存在 localStorage，防止被恶意读取；脱敏或服务端校验更稳妥
- 定期清理过期 key（如 30 天未访问的字典），可用
dict:cache_meta中的时间戳辅助判断
