sessionstorage 可在页面刷新后保留表单数据，但仅限当前标签页且关闭后自动清空；需实时监听 input/change 事件即时保存字段值，页面加载时读取并还原，注意特殊元素处理及提交后主动清理。
SessionStorage 可以在页面刷新后保留表单数据，但仅限当前标签页且关闭后自动清空。关键在于「实时监听输入 + 刷新前恢复」，而不是等提交时才存。
监听表单字段变化并即时保存
对每个可编辑字段（如 input、textarea、select）绑定 input 或 change 事件，把值按字段名存入 sessionStorage：
- 推荐用 input 事件，支持实时输入（包括中文输入法未上屏前也触发）
- 字段 name 或 id 作为 key，值作为 value，例如：
sessionStorage.setItem('username', input.value) - 多个字段可统一处理：遍历 form 元素，为每个有 name 的控件添加监听
页面加载时自动还原数据
在页面初始化阶段（如 DOMContentLoaded 后），读取 sessionStorage 中对应字段的值并赋给表单控件：
- 需判断值是否存在，避免覆盖用户手动清空的内容（如空字符串可保留）
- 注意类型：sessionStorage 只存字符串，checkbox/radio 需额外处理 checked 状态
- select 下拉框要设置 selectedIndex 或 value；textarea 直接设 value 即可
处理特殊表单元素
复选框、单选按钮、文件上传等不能直接用 value 存储：
- checkbox/radio：存布尔值或 value 字符串，恢复时用
el.checked = JSON.parse(stored)或匹配 value - 文件字段（
<input type="file">）无法还原（安全限制），可单独提示或跳过存储 - 富文本编辑器（如 contenteditable）需监听其容器的 input 或使用 MutationObserver
主动清理与边界情况
避免旧数据干扰新表单或跨流程残留：
- 表单成功提交后，调用 sessionStorage.removeItem() 或 clear() 清空相关键
- 用户点击「重置」按钮时，同步清空 sessionStorage 对应字段
- 不同表单共用同一页面时，建议加前缀区分 key，如
'signup-username'和'login-email'
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
