sessionStorage.setItem存对象变成"[object Object]"是因为该方法只接受字符串值，传入对象会自动调用toString()；必须用JSON.stringify()序列化后存储，读取时用JSON.parse()解析，并加try/catch防错。
sessionStorage.setItem 存对象为什么变成 "[object Object]"
因为 sessionStorage.setItem 只接受字符串作为值，传入对象会自动调用 toString()，结果就是 "[object Object]"。这不是 bug，是规范行为。
必须显式序列化：
- 存前用
JSON.stringify(data) - 取后用
JSON.parse(sessionStorage.getItem('key')) - 加
try/catch防止解析失败（比如用户手动删了部分数据）
不处理 undefined、Date、函数等类型，它们在 JSON 中会被静默丢弃或转成 null/字符串。
多步骤表单该用 sessionStorage 还是 localStorage
看生命周期需求：
- 只防刷新、关 tab 就清空 → 用
sessionStorage（推荐注册流程） - 要关浏览器也不丢、支持断点续填 → 用
localStorage - 敏感字段（如身份证号、银行卡）别明文存任何一种，哪怕只是临时
sessionStorage 不跨标签页，天然隔离；localStorage 同域名所有页面可读，适合多页跳转的长流程，但得自己加 key 前缀防冲突。
如何避免不同步骤覆盖同一 key 导致数据丢失
直接反复 setItem('form_data', ...) 会覆盖——这是设计如此，不是误操作。
两种可靠做法：
- 分步 key：用
'form_step1'、'form_step2'独立存，跳转时按需读取 - 合并 key：统一用
'form_all'，每次读出整个对象，用Object.assign()或展开运算符更新字段，再写回。推荐后者，结构清晰、最后提交时取全量方便
别依赖“先存 step1、再存 step2”就自动合并——JS 不会帮你 merge，必须手动做。
表单控件值怎么正确取和设（checkbox/radio/select[multiple]）
不同控件取值方式不同，硬套 .value 会漏掉状态：
-
input[type="checkbox"]和input[type="radio"]：取el.checked，设也要赋布尔值，不能只设value -
select[multiple]：用Array.from(el.selectedOptions).map(o => o.value)取数组，存前JSON.stringify - 普通
input、textarea、select单选：直接用.value
回填时也得对应处理：比如 checkbox 要写 el.checked = !!data.agree，而不是 el.value = data.agree。
最易被忽略的是空值判断和类型还原——sessionStorage.getItem('key') === null 才算真没数据，空字符串、"false" 都是有效值；JSON 解析后布尔、数字可能变字符串，必要时手动转换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
