localstorage缓存大屏图表历史数据需遵循「合理序列化+分片存储+时效控制」：精简结构（数组替代对象、时间戳转整数、枚举映射数字）、单键≤800kb、键名规范、元数据管理、手动过期校验与清理，并添加降级兜底机制。
在 LocalStorage 中缓存大屏图表的历史统计数据，核心是「合理序列化 + 分片存储 + 时效控制」。Local Storage 单条上限约 5–10MB（浏览器而异），但实际建议单条不超过 2MB，避免阻塞主线程或触发 QuotaExceededError。大屏图表常含时间序列、多维度聚合数据（如每分钟的 PV/UV、地域分布、设备占比等），原始 JSON 可能轻易超限，直接 JSON.stringify 存储容易失败。
压缩数据结构，剔除冗余字段
历史统计数据往往包含大量重复字段（如相同时间戳、重复的指标名、未变化的维度标签）。可提前精简：
- 用数组替代对象数组：例如将
[{t: "2024-05-01T09:00", pv: 123, uv: 89}, {t: "2024-05-01T09:01", pv: 135, uv: 92}]转为[["2024-05-01T09:00", 123, 89], ["2024-05-01T09:01", 135, 92]]，省去 key 名开销 - 时间戳统一转为相对秒数（如距当天 0 点的秒数），或使用 Date.parse() 后的整数，比 ISO 字符串节省 50%+ 空间
- 枚举类字段（如
"device": "mobile"）映射为数字码（device: 1），配合本地字典还原
分片存储 + 键名规范管理
单个图表数据若超 1.5MB，不要硬塞进一个 key。按时间范围或数据类型拆成多个键：
- 键名格式建议：
chart:dashboard_user_active:20240501（日期粒度）、chart:dashboard_region_pv:hourly_202405（小时级月汇总） - 每个分片控制在 800KB 以内；可用
JSON.stringify(data).length预估大小，再用Blob.size或new TextEncoder().encode(str).length获取更准字节数 - 维护元数据 key（如
chart:dashboard_user_active:meta）记录分片列表、更新时间、总条数，便于清理和重建
设置过期与主动清理策略
LocalStorage 无自动过期机制，必须自行管理：
- 写入时存入时间戳：
localStorage.setItem(key, JSON.stringify({ data: ..., ts: Date.now(), ttl: 86400000 }))（24 小时） - 读取前校验：
const item = JSON.parse(localStorage.getItem(key)); if (Date.now() - item.ts > item.ttl) { localStorage.removeItem(key); return null; } - 定期清理旧分片：启动时扫描所有
chart:*键，删除过期项或超过保留天数（如仅保留最近 7 天）的分片
降级与错误防护不可少
LocalStorage 不可靠（用户禁用、空间满、私密模式下为空），务必加兜底：
- 封装统一 storage 工具，写入前 try/catch，捕获
QuotaExceededError后自动触发清理或降级到内存缓存 - 首次加载图表时，优先尝试从 LocalStorage 读取，失败则请求接口，并在成功后异步写入（避免阻塞渲染）
- 对关键图表启用「增量更新」：只存最新 N 条变更，而非全量快照，减少写入体积和频率
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
