员工档案表单实现多标签页分步保存，核心是 sessionStorage 实时存每步数据并用 BroadcastChannel 通知同步；结构上用 fieldset+legend 封装各步骤，动态控制显隐与禁用状态，只存修改字段，通过 localStorage 中转广播触发更新，并在页面加载时自动恢复进度和焦点。
员工档案表单实现多标签页分步保存，核心是两件事：一是把每步数据实时存到 sessionStorage（关掉标签页即清空，更安全），二是用 BroadcastChannel 让所有同源标签页互相通知变化。纯 HTML 做不到，必须靠 JavaScript 驱动。
分步结构用 fieldset + legend 封装
整个表单只有一个 <form>，每步用 <fieldset> 包裹，<legend> 写步骤标题（如“基本信息”“教育经历”“工作履历”）。这样语义清晰、屏幕阅读器友好，也方便 JS 批量控制显隐和禁用状态。
- 初始只显示第 1 步，其余
style="display: none"或加aria-hidden="true" - 切换步骤时，动态设置
fieldset.disabled = true禁用非当前步，防止用户跳过校验直接编辑 - 别给隐藏的
fieldset加required属性，否则浏览器会校验不可见字段，报错或阻断流程
每步数据单独存，键名带步骤标识
不把全部字段塞进一个对象，而是按步分开存，避免字段名冲突（比如“入职日期”在两步都出现）和误覆盖。
- 存第 1 步：
sessionStorage.setItem('staffForm_step1', JSON.stringify({ name: '张三', idCard: '110...' })) - 存第 2 步：
sessionStorage.setItem('staffForm_step2', JSON.stringify({ school: 'XX大学', major: '计算机' })) - 只存用户改过的字段：对比
input.value !== input.defaultValue，避免把空值、默认值写进存储
多标签页同步靠 BroadcastChannel + localStorage 中转
BroadcastChannel 不能直接传 DOM 或复杂对象，所以用 localStorage 当“中转站”，再用广播通知其他标签页“有新数据了”。这样兼容性好，且关闭标签页后数据自动清理（因主存用的是 sessionStorage，中转用 localStorage 只存轻量标记）。
立即学习“前端免费学习笔记（深入）”；
- 用户在标签页 A 修改第 2 步，先存入
sessionStorage，再触发localStorage.setItem('staffForm_sync_trigger', Date.now()) - 所有标签页监听
storage事件，发现 key 是staffForm_sync_trigger，就主动从sessionStorage读取对应步骤数据并更新表单 - 为防循环更新，每个标签页写入前先打时间戳标记，读取时比对是否为自己刚写的，跳过自身广播
页面加载时自动恢复进度
用户刷新或新开标签页，要立刻回到上次所在步骤，并填好已输内容。
- 页面初始化时，先查
sessionStorage.getItem('staffForm_currentStep')，拿到当前步数 - 再按步数依次读取对应
staffForm_stepX数据，遍历填充到对应input的value或checked - 还原复选框、单选按钮时注意类型：
el.checked = savedValue === 'true'，别直接赋字符串 - 最后把焦点移到当前步第一个可聚焦元素（如
fieldset.querySelector('input, select, textarea').focus()）
