JSON.stringify() 可生成前端状态快照，但需确保对象仅含可序列化数据（纯对象、数组、字符串等），须过滤/转换函数、Date、循环引用等不可序列化内容，并通过replacer、类型标记及校验机制安全还原。
用 JSON.stringify() 把当前 JS 对象转成字符串，就能生成一个可存储、可传输的前端状态快照。关键在于确保对象可序列化，且能合理还原。
只序列化可 JSON 化的数据
JSON 格式不支持函数、undefined、Symbol、Date 对象、RegExp、Map、Set、BigInt 等。直接传入含这些值的对象会导致报错或静默丢失。
建议做法：
- 只对纯数据对象（plain object）、数组、字符串、数字、布尔值、null 使用
JSON.stringify() - 提前过滤或转换不可序列化字段，例如把
new Date()转为 ISO 字符串：date.toISOString() - 用
replacer参数跳过敏感或不可序列化字段：JSON.stringify(state, (key, value) => key === 'tempRef' ? undefined : value)
处理循环引用和特殊类型
如果状态对象内部有循环引用（比如父子双向引用），JSON.stringify() 会直接抛错 TypeError: Converting circular structure to JSON。
立即学习“Java免费学习笔记（深入）”；
简单应对方式：
- 用第三方库如
flatted或cycle实现带引用标记的序列化（适合调试或开发期快照） - 生产环境更推荐「净化」状态：在快照前手动解构出必要字段，避免嵌套过深或引用关系
- 对 Date、RegExp 等，统一约定转换规则，例如：
{ type: 'date', value: '2024-05-20T10:30:00Z' }
还原快照时注意类型恢复
JSON.parse() 只能还原基础类型，原始的 Date、自定义类实例等都会变成普通对象。
安全还原建议：
- 不要依赖
instanceof判断，改用字段特征识别，例如检测obj.$type === 'date'后再 new Date(obj.value) - 对关键结构封装快照/恢复函数：
function snapshot(state) { return JSON.stringify({ ...state, updatedAt: new Date().toISOString() }); }function restore(str) { const obj = JSON.parse(str); return { ...obj, updatedAt: new Date(obj.updatedAt) }; } - 还原后做简易校验，比如检查必有字段是否存在，避免因快照损坏导致运行异常
配合 localStorage 做轻量持久化快照
这是最常见的落地场景：用户离开页面前保存状态，回来时自动恢复。
示例代码：
- 保存：
localStorage.setItem('app-snapshot', JSON.stringify(currentState)); - 恢复：
const saved = localStorage.getItem('app-snapshot'); const state = saved ? JSON.parse(saved) : defaultState; - 加个时间戳或版本号字段，便于后续判断快照是否过期或兼容
- 注意 localStorage 容量限制（通常 5–10MB），大状态建议压缩或分片，或改用 IndexedDB
不复杂但容易忽略：快照不是万能备份，它只记录那一刻的数据快照，不包含 DOM、事件监听器、闭包状态等运行时上下文。用于表单暂存、折叠展开状态、筛选条件这类纯数据场景最合适。
