sessionstorage 在弹窗中暂存表单数据需确保同源且由同一页面触发，推荐使用 dom 模态框；弹窗初始化时读取、输入时实时保存并防抖、关闭前兜底保存，提交成功后及时清理，不适用于敏感信息或跨窗口场景。
SessionStorage 在弹窗中暂存表单数据，核心是“在弹窗打开时读取、关闭前保存、页面刷新不丢失（但仅限当前会话）”。它不跨窗口共享，所以必须确保弹窗与主页面同源且由同一页面触发（如 window.open 或模态框），否则无法访问同一 sessionStorage。
确认弹窗与主页面共享 sessionStorage
只有通过 JavaScript 主动打开的同源窗口（例如 window.open('same-origin-page.html')），才能与父页面共用同一个 sessionStorage。如果是 iframe 或第三方弹窗（如跨域弹窗、独立 URL 页面），sessionStorage 是隔离的，无法直接读写主页面的数据。
- 推荐优先使用 DOM 模态框（如
<div id="modal"></div>），它和主页面完全共享 sessionStorage，无需额外处理 - 若必须用
window.open，确保目标 URL 与主页面同协议、域名、端口，否则 sessionStorage 不互通 - 可通过
window.opener在子窗口中安全访问父页面的 sessionStorage（前提是同源）
在弹窗打开时恢复表单数据
弹窗初始化时，从 sessionStorage 中读取对应键的数据，并填充到表单字段。建议用唯一标识（如表单 ID 或业务场景名）作为 key，避免冲突。
Java Linux版
下载
Java Linux版下载入口，提供 Oracle JDK 26.0.2 官方 Linux 安装包、Java 环境配置、JDBC 数据库连接和 Java 服务端开发相关信息。
- 例如：主页面打开弹窗前，可先存一次空结构：
sessionStorage.setItem('userFormDraft', JSON.stringify({ name: '', email: '' })) - 弹窗 JS 加载后立即执行：
const draft = JSON.parse(sessionStorage.getItem('userFormDraft') || '{}'); - 遍历表单元素，按
name或id匹配并赋值：Object.keys(draft).forEach(key => { const el = document.querySelector(`[name="${key}"]`); if (el) el.value = draft[key]; });
实时保存 + 关闭前兜底保存
不要只依赖关闭时保存——用户可能意外刷新或关闭标签页。应在关键交互（如输入失焦、内容变化）时主动存入，再配合窗口卸载事件做最后保障。
- 监听表单变化：
form.addEventListener('input', () => { saveToSession(); }); - 定义保存函数：
function saveToSession() { const data = new FormData(form); const obj = Object.fromEntries(data.entries()); sessionStorage.setItem('userFormDraft', JSON.stringify(obj)); } - 防止重复保存加简单防抖（如 300ms）更友好
- 补充
window.addEventListener('beforeunload', saveToSession)，应对意外关闭
提交成功后及时清理
表单提交成功（无论 AJAX 还是跳转），应主动清除 sessionStorage 中的草稿，避免下次误填旧数据。
- AJAX 提交后，在 success 回调里执行：
sessionStorage.removeItem('userFormDraft'); - 如果提交后页面跳转，可在新页面加载时清空（需判断是否为成功跳转）；更稳妥的做法是在提交前清空，或服务端返回成功后再清空
- 也可加时间戳或版本号字段，在读取时校验是否过期（如超过 24 小时自动丢弃）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
