可一键导出当前页面所有localStorage数据为格式化JSON文件，支持中文、嵌套对象及数组，自动创建下载链接保存为localStorage-snapshot.json。
可以直接导出当前页面所有 localStorage 数据，生成结构清晰的 JSON 文件，作为前端运行时配置的“快照”，供后端快速比对环境差异、复现问题或验证配置是否下发成功。
导出全部 localStorage 数据（一键生成下载）
在浏览器控制台（F12 → Console）中粘贴并执行以下代码：
- 它会把当前域名下所有键值对读取出来，转为格式化 JSON
- 自动创建下载链接，点击即保存为 localStorage-snapshot.json
- 支持中文、嵌套对象、数组等，已做基础容错处理
for (let i = 0; i const key = localStorage.key(i);
try {
const raw = localStorage.getItem(key);
data[key] = JSON.parse(raw); // 尝试解析，失败则保留原始字符串
} catch (e) {
data[key] = raw;
}
}
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `localStorage-snapshot-${new Date().toISOString().slice(0,16).replace(/[:]/g,'-')}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
为什么这个快照对后端排查特别有用
后端常需确认：是接口返回异常？还是前端本地缓存污染了状态？这个快照能直接回答：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
token 或用户身份相关字段（如
auth_token、user_profile）是否过期、为空、格式异常 -
功能开关或灰度标识（如
feature_flags、ab_test_group）是否与预期一致 -
接口请求参数缓存（如
last_search_params、filter_preset）是否残留脏数据 - 多环境混淆线索：比如开发环境误存了生产 API 地址，或测试账号 token 残留
配合后端使用的建议做法
不是只发一个 JSON 文件就结束，可提升协作效率：
立即学习“前端免费学习笔记（深入）”；
- 导出时建议加上简短上下文，例如：“用户反馈提交失败，点击立即支付按钮无反应”
- 后端收到后，可用文本比对工具（如 VS Code 内置 diff）对比正常用户与异常用户的快照差异
- 若项目已封装 storage 工具（如带前缀、过期时间），快照中可快速识别出哪些是业务数据、哪些是框架/插件写入（如
frontend_uservsinfinity-icons） - 敏感字段（如 token）可提前在导出脚本中过滤，避免泄露：
if (key.includes('token') || key.includes('auth')) continue;
进阶：自动化集成到错误上报流程
可在全局错误捕获（window.onerror 或 Promise.catch）中触发快照生成，并附在 Sentry / 自建监控上报体里：
- 不强制上传，而是生成可点击的下载按钮，由开发者手动触发
- 限制仅在非生产环境启用，或加开关控制
- 结合
performance.memory和navigator.userAgent一并采集，形成完整现场信息
