能。sessionstorage在页面刷新后仍保留数据,只要不关闭浏览器标签页;应监听input事件实时存入,并在domcontentloaded时恢复草稿。

sessionStorage 能不能在刷新后保留数据
能。只要不关闭浏览器标签页,sessionStorage 的内容在页面刷新、导航跳转甚至执行 location.reload() 后都完整保留——它绑定的是当前 tab 的会话生命周期,不是单次页面加载。
监听表单输入并实时存入 sessionStorage
别等提交时才存,用户可能中途关掉页面或意外刷新。应该对可编辑字段(<input>、<textarea></textarea>、<select></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
- 不要在
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 共享,同一站点开两个标签页,它们的草稿完全隔离——这点常被忽略,导致用户以为“没保存成功”。











