直接用 sessionStorage 存临时用户数据最轻量，但必须 JSON.stringify() 后存储、判空后 JSON.parse() 读取，键名需标准化为字母数字下划线，提交成功后清除，私密模式需 try/catch 回退内存缓存。
直接用 sessionStorage 是最轻量、最匹配“临时用户数据”需求的方案，但不加处理地调用 setItem() 很容易静默丢数据——不是功能失效，而是值被转成 "[object Object]" 或截断，你根本收不到报错。
为什么不能直接 sessionStorage.setItem('form', obj)
因为 sessionStorage.setItem() 只接受字符串作为第二个参数。传入对象、数组、null 或 undefined 时，浏览器会隐式调用 .toString()：对象变成 "[object Object]"，null 变成字符串 "null"，后续 JSON.parse() 必然失败。
- 必须先
JSON.stringify()再存：sessionStorage.setItem('formData', JSON.stringify({ username: 'alice', email: 'a@b.com' })) - 读取时先判空再解析：
const raw = sessionStorage.getItem('formData'); if (raw) { const data = JSON.parse(raw); } - 布尔值、数字也建议统一走 JSON 流程，避免类型混淆（比如
'true'和true）
表单字段怎么映射到 sessionStorage 键名
键名必须和表单字段的 name 属性严格一致，否则恢复时对不上。但 name 可能含点号、方括号或空格（如 user.profile.name、items[0].price），这些在 JS 中是合法属性名，却会导致 sessionStorage 存取异常或被截断。
- 推荐只用字母、数字、下划线命名表单字段：
username、email_address、phone_number - 若后端已定义复杂
name（如address[street]），前端存前需做标准化替换：key.replace(/[[\].]/g, '_') -
checkbox和radio要存checked状态，不是value；多选select需遍历selectedOptions收集值数组
什么时候清空 sessionStorage 数据
提交成功后不清空，用户下次打开表单会误恢复旧数据——这是最常见的逻辑漏洞。而页面关闭时不用手动清理，sessionStorage 会自动销毁，强行调用 clear() 反而可能干扰其他同页功能。
立即学习“前端免费学习笔记（深入）”；
- 仅在表单
submit事件成功回调中清除：sessionStorage.removeItem('formData')或sessionStorage.clear()（如果只存本表单） - 用户点击“重置”按钮时同步清除对应键，避免残留
- 不要监听
beforeunload去清理——既没必要，也可能因异步延迟失败 - 私密模式下部分浏览器（如 Safari 无痕窗口）会静默禁用写入，
setItem()不报错但实际没存，需加try/catch并 fallback 到内存缓存
真正难的是字段结构动态变化时的兼容性：富文本编辑器内容、文件 input 的临时 blob URL、带时间戳的草稿标识……这些没法靠统一 name 映射解决，得按具体控件类型定制序列化逻辑。别指望一次封装通用函数就覆盖所有场景。
