sessionstorage适合多步骤问卷暂存答案,页面关闭即清空;每步用json.stringify存为step1、step2等键名对象;跳转时try-catch解析并填充表单;最终合并提交并clear清理。

SessionStorage 是浏览器提供的临时存储机制,适合在多步骤问卷中暂存用户当前会话的答案——页面关闭或标签页关闭后自动清空,既安全又无需后端参与。
每步提交时保存到 sessionStorage
用户填写完某一步(比如第2页),点击“下一步”前,把当前页所有字段值序列化后存入 sessionStorage。推荐用键名区分步骤,例如 "step1"、"step2",避免覆盖。
- 用 JSON.stringify() 转对象再存,别直接存 DOM 元素或函数
- 示例:
sessionStorage.setItem('step2', JSON.stringify({ name: '张三', age: 28 })) - 若某步有多个字段,建议统一收集为一个对象,结构清晰易维护
进入新步骤时自动恢复上一步数据
跳转到第3页时,先检查 sessionStorage 中是否存在 "step2",如果有就解析并填充表单。注意做容错处理,避免因数据损坏导致脚本报错。
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
- 用 try-catch 包裹
JSON.parse(),解析失败时忽略或重置 - 填充前先判断字段是否存在,防止
undefined写入 input 的 value - 复选框、单选按钮、下拉框需单独处理选中状态,不能只靠 value 赋值
最后提交时合并所有步骤数据
用户完成全部步骤并点击“提交”,遍历所有已保存的 step 键(如 step1~step5),逐个解析合并成最终数据对象,再发给后端。
- 可用 Object.assign() 或扩展运算符
{...step1, ...step2}合并,但注意字段名不要冲突 - 建议在提交成功后调用 sessionStorage.clear() 清理,避免残留
- 如果允许用户返回修改,每次保存都应覆盖对应 step 的值,而不是追加
注意兼容性和边界情况
sessionStorage 在现代浏览器中支持良好,但需留意:隐身模式可能限制容量或禁用;超过 5MB 会抛出 QuotaExceededError;跨标签页不共享。
- 大文本题(如长文本描述)建议限制字数,或考虑用 localStorage + 用户主动保存选项
- 页面意外刷新后,只要标签页没关,数据仍在,可结合 beforeunload 提示用户“未完成问卷”
- 移动端键盘弹起可能导致页面滚动,填完别急着跳转,等用户视觉确认后再存
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










