浅拷贝不能直接保存滚动位置，需结合scrollY、scrollTop等API手动采集并存储轻量状态；标签页切换时通过visibilitychange事件监听，在失焦时存、聚焦时还原。
浅拷贝本身不能直接保存滚动位置与状态，它只是复制对象第一层属性的引用值；真正起作用的是结合 window.scrollY、element.scrollTop 等 API 手动采集 + 浅拷贝（或结构化克隆）保存轻量状态数据。标签页切换时需监听生命周期事件，并在合适时机读写。
一、明确哪些状态适合用浅拷贝保存
浅拷贝适用于纯数据对象（如表单输入值、当前页码、筛选条件、折叠状态等），不包含 DOM 引用或函数：
- 可以浅拷贝保存的：{ page: 2, keyword: "前端", isExpanded: true }
- 不能靠浅拷贝保存的：DOM 元素、事件监听器、Canvas 上下文、滚动位置本身（它是数值，但需单独获取）
二、手动采集并保存滚动位置与轻量状态
在标签页失焦前（如用户切走）记录关键信息，使用 sessionStorage 或 Map 缓存，示例：
// 假设每个标签页有唯一 id，如 tab-1
const TAB_ID = 'tab-1';
const state = {
scrollY: window.scrollY,
listScrollTop: document.getElementById('list-container')?.scrollTop || 0,
// 浅拷贝表单/筛选状态（确保是 plain object）
filters: { ...currentFilters }, // 或 Object.assign({}, currentFilters)
activeTab: currentActiveTab
};
sessionStorage.setItem(`tab-state-${TAB_ID}`, JSON.stringify(state));
三、标签页重新聚焦时还原状态
监听 visibilitychange 或 focus 事件，在页面可见/获得焦点时恢复：
立即学习“Java免费学习笔记（深入）”；
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
const saved = sessionStorage.getItem(`tab-state-${TAB_ID}`);
if (saved) {
const state = JSON.parse(saved);
window.scrollTo(0, state.scrollY);
const listEl = document.getElementById('list-container');
if (listEl && state.listScrollTop !== undefined) {
listEl.scrollTop = state.listScrollTop;
}
// 浅拷贝还原状态对象（可直接赋值，因为是基础类型）
currentFilters = { ...state.filters };
currentActiveTab = state.activeTab;
}
}
});
四、注意点与替代建议
浅拷贝在这里只是辅助手段，核心是“采集 → 序列化存储 → 还原”。更稳妥的做法：
- 优先用
JSON.stringify / JSON.parse，天然跳过函数、undefined、Symbol，避免浅拷贝引发的引用残留问题 - 对复杂状态（如含 Date、RegExp），改用
structuredClone()（现代浏览器支持） - 滚动位置必须单独获取和设置，不能依赖对象拷贝
- 避免在
beforeunload中异步保存，应提前在visibilitychange隐藏时就存好
