状态持久化前需先深拷贝再序列化，以避免不可序列化类型报错、数据丢失或响应式副作用；推荐用structuredClone或fast-copy深拷贝后JSON.stringify，读取后无需再深拷贝。
深拷贝本身不是序列化，但在写入 LocalStorage 前对复杂对象做深拷贝，是为了确保存进去的是干净、独立、无副作用的副本——尤其当原始对象可能被后续逻辑修改、或含有不可序列化的引用时。
为什么状态持久化前需要先深拷贝？
直接把当前状态对象（比如一个 React 的 state 或 Vue 的 reactive 对象）传给 JSON.stringify() 是危险的：
- 原始对象可能含 Date、RegExp、Map、Set 等无法被 JSON 处理的类型，导致
stringify报错或静默丢失 - 若对象中存在函数、undefined、Symbol，JSON 方法会直接丢弃，造成数据不一致
- 某些状态管理库（如 Zustand、Pinia）返回的对象是 Proxy 包裹的响应式对象，直接 stringify 可能触发副作用或返回空对象
- 如果状态对象里嵌套了 DOM 节点、window 引用等宿主对象，也会中断序列化
推荐的深拷贝 + 序列化组合流程
分两步走：先安全深拷贝，再可靠序列化。不建议跳过深拷贝直接 stringify。
-
现代浏览器首选：用
structuredClone()深拷贝，再用JSON.stringify()序列化
它能保留 Date、RegExp、ArrayBuffer、Error 等类型（但依然不支持函数/undefined/Symbol），比纯 JSON 方法更健壮 -
兼容旧环境或需更高控制力：用
fast-copy或lodash.cloneDeep()拷贝，再 stringifyfast-copy比cloneDeep更快，且默认处理循环引用；lodash则生态成熟、文档完善 -
简单场景（纯数据对象）：可省略显式深拷贝，直接
JSON.stringify(state)——但务必加 try/catch，并在读取时用空值 fallback 防止解析失败
实际写入 LocalStorage 的安全封装示例
以 React 中保存用户配置为例：
立即学习“Java免费学习笔记（深入）”；
function saveToStorage(key, value) {
try {
// 先深拷贝（避免污染原始 state，也过滤掉不可序列化字段）
const safeCopy = structuredClone ? structuredClone(value) : fastCopy(value);
// 再序列化
const json = JSON.stringify(safeCopy);
localStorage.setItem(key, json);
} catch (err) {
console.warn(`Failed to persist ${key}:`, err.message);
}
}
// 使用
saveToStorage('userPrefs', { theme: 'dark', notifications: true, lastVisit: new Date() });
注意：structuredClone 在 Chrome 98+/Firefox 94+/Safari 15.4+ 支持良好；若需兼容更低版本，fast-copy 是轻量可靠的替代。
读取时也要注意“反序列化后是否还需深拷贝”
从 LocalStorage 读出的是字符串，JSON.parse() 后得到的是普通对象——它已经是“深拷贝结果”，无需再拷贝一次。但要注意：
- 如果原始存入时用了
structuredClone，那读出后 Date 还是 Date、RegExp 还是 RegExp，但这些类型仍不能直接存回 localStorage（因为 localStorage 只接受字符串） - 如果业务逻辑需要对读出的对象做进一步修改并再次保存，建议在修改前再做一次深拷贝，避免意外污染缓存源
- 读取失败时（如 JSON 解析异常），应返回合理默认值，而不是让整个状态初始化崩溃
