用localstorage统一key存结构化日志数组，新增时读取、追加、序列化写回，并限流（如保留200条或7天内）、校验大小、支持查询导出清理及版本标记；sessionstorage适用于会话级临时日志。
用 HTML5 WebStorage 实现用户操作日志的本地缓存，核心是用 localStorage 持久记录日志条目，配合结构化存储与轻量管理逻辑。它适合轻量级场景（如表单填写中途断网、按钮点击追踪、页面浏览路径等），不依赖后端，但需注意容量限制与数据组织方式。
用 localStorage 存结构化日志数组
不要每条日志单独设一个 key（如 log_1、log_2），而是统一用一个 key（如 user_logs）存整个日志数组。每次新增日志时：
- 读取已有日志：
JSON.parse(localStorage.getItem('user_logs') || '[]') - 追加新条目（含时间、操作类型、上下文）：
logs.push({ type: 'click', target: 'save-btn', timestamp: Date.now() }) - 序列化并写回：
localStorage.setItem('user_logs', JSON.stringify(logs))
控制日志数量与大小，避免爆仓
`localStorage` 容量通常为 5MB，但实际建议主动限流。例如只保留最近 200 条日志：
- 追加前检查长度：
if (logs.length > 200) logs = logs.slice(-200) - 也可按时间过滤（如仅保留 7 天内日志）：
const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000; logs = logs.filter(log => log.timestamp > weekAgo) - 写入前简单估算大小（防止超限）：
const size = new TextEncoder().encode(JSON.stringify(logs)).length，超 4MB 就截断或清旧
支持日志的查询、导出与清理
日志不只是“写进去”，还要能“用起来”：
-
查某类操作：遍历数组过滤，
logs.filter(log => log.type === 'input') -
导出为文本：生成可读字符串或 CSV，调用
download链接触发下载 -
一键清空：直接
localStorage.removeItem('user_logs')或localStorage.clear()（慎用） -
带版本标记：首次初始化时写入
localStorage.setItem('logs_version', '1.0')，便于后续格式迁移
注意 sessionStorage 的适用边界
如果日志只用于当前会话排错（比如调试单次表单提交流程），可用 `sessionStorage` 替代：
- 自动随标签页关闭清除，无需手动清理
- 天然隔离多标签页，避免日志混杂
- 但刷新页面不丢失，仍可满足“临时缓存”需求
写法与 `localStorage` 完全一致，仅把 localStorage 换成 sessionStorage 即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
