能。sessionStorage在页面刷新后仍保留数据，只要不关闭浏览器标签页；应监听input事件实时存入，并在DOMContentLoaded时恢复草稿。
sessionStorage 能不能在刷新后保留数据
能。只要不关闭浏览器标签页，sessionStorage 的内容在页面刷新、导航跳转甚至执行 location.reload() 后都完整保留——它绑定的是当前 tab 的会话生命周期，不是单次页面加载。
监听表单输入并实时存入 sessionStorage
别等提交时才存，用户可能中途关掉页面或意外刷新。应该对可编辑字段（<input>、<textarea>、<select>）绑定 input 事件（对 contenteditable 元素需用 input + blur 组合）：
const form = document.getElementById('myForm');
form.addEventListener('input', (e) => {
const field = e.target;
if (field.name) {
sessionStorage.setItem(`draft_${field.name}`, field.value);
}
});
-
input事件比change更及时，支持中文输入法上屏即存 - 避免用
keyup：用户长按按键、粘贴、拖拽文本时容易漏存 - 字段名（
field.name）必须存在且唯一，否则多个同名控件会互相覆盖
页面加载时自动恢复草稿
在 DOM 加载完成（DOMContentLoaded）后读取 sessionStorage 并填充对应字段：
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('myForm');
for (let i = 0; i < form.elements.length; i++) {
const el = form.elements[i];
if (el.name) {
const saved = sessionStorage.getItem(`draft_${el.name}`);
if (saved !== null) {
el.value = saved;
// 对 checkbox/radio 需额外处理 checked 状态
if (el.type === 'checkbox' || el.type === 'radio') {
el.checked = saved === 'true';
}
}
}
}
});
- 不要在
load事件里做恢复——DOM 可能还没就绪，form.elements为空 -
sessionStorage.getItem()返回null而非undefined，用!== null判断更稳妥 - checkbox/radio 的值是布尔语义，但
sessionStorage只存字符串，得显式转回true/false
什么时候该清空草稿
草稿不是永久保存的，应在明确成功提交后清除，否则下次打开表单仍显示旧内容：
- 表单
submit事件触发后，调用sessionStorage.removeItem()清理所有相关 key - 若使用
fetch或axios异步提交，要在响应成功回调里清理，而不是在submit处理器开头就清 - 用户主动点击「清空草稿」按钮时，可用
sessionStorage.clear()，但更推荐遍历 key 做精准删除，避免误删其他模块数据
注意：sessionStorage 不跨 tab 共享，同一站点开两个标签页，它们的草稿完全隔离——这点常被忽略，导致用户以为“没保存成功”。
