本文介绍如何利用浏览器 localstorage 在 web 表单提交后自动恢复下拉框（select）的上次选中值，解决页面刷新或重载导致选项重置的问题，适用于 google apps script html service 等无服务端状态的前端场景。
本文介绍如何利用浏览器 localstorage 在 web 表单提交后自动恢复下拉框（select）的上次选中值，解决页面刷新或重载导致选项重置的问题，适用于 google apps script html service 等无服务端状态的前端场景。
在构建数据录入类表单（如 Daily Contact Form）时，用户常需多次提交相似内容。若每次刷新后下拉框都恢复为空或默认值，将显著降低操作效率。你已正确使用 localStorage 存储和读取 supervisor 与 substation 的值，但核心问题在于调用时机错误：validateForm() 中调用 prefillDropdowns() 并不能立即生效——因为此时表单尚未提交完成、页面也未重新加载，而 prefillDropdowns() 依赖的是 DOM 已渲染完毕且下拉选项已就绪的状态。
✅ 正确做法：在页面加载完成时预填充
应将 prefillDropdowns() 移出 validateForm()，改在 window.onload 阶段统一执行，确保 DOM 完全加载、所有 <select></select> 元素可用，并且动态生成的选项（如 substation 下拉项）已完成渲染：
window.onload = function() {
setDefaultDate(); // 设置日期默认值
prefillDropdowns(); // 从 localStorage 恢复下拉选中状态
};⚠️ 注意：
prefillDropdowns()必须在setDefaultDate()之后调用，避免因日期控件初始化逻辑干扰全局流程；同时，它不能放在validateForm()内——该函数仅用于表单校验与提交前逻辑，此时页面尚未跳转或重载，强行设置下拉值不仅无效，还可能因getParcels(substation)触发异步请求而引发竞态问题（例如parcel下拉框尚未生成，getParcels()却尝试操作空节点）。
? 关键代码修正说明
-
移除冗余调用
删除validateForm()函数末尾的这两行：// ❌ 错误：提交前强制预填，无实际意义且易出错 prefillDropdowns();
-
确保
prefillDropdowns()安全执行
为防止localStorage中存在但 DOM 尚未就绪的情况，建议增强容错性：function prefillDropdowns() { const supervisor = localStorage.getItem("supervisor"); const substation = localStorage.getItem("substation"); const supervisorEl = document.getElementById("supervisor"); const substationEl = document.getElementById("substation"); if (supervisorEl && supervisor) { supervisorEl.value = supervisor; } if (substationEl && substation) { substationEl.value = substation; // 延迟触发 getParcels，确保 substation 下拉已渲染完成 setTimeout(() => getParcels(substation), 10); } } 配合后端提交行为（可选优化）
若使用form[method="post"]提交至服务端（如 GAS 的= getUrl() ?>），浏览器默认会整页刷新。此时localStorage数据天然保留，只需确保onload阶段正确还原即可。无需额外监听beforeunload或阻止默认行为——除非你改用fetch()实现无刷新提交（AJAX），那才需手动维护状态并调用prefillDropdowns()。
? 总结
- ✅ 正确时机：
prefillDropdowns()应在window.onload（或DOMContentLoaded）中执行，而非表单验证函数内； - ✅ 必要前提：确保目标
<select></select>元素及其<option></option>已存在于 DOM 中（静态项 + 动态渲染均完成）； - ✅ 容错增强：添加元素存在性判断与
setTimeout延迟调用，规避异步渲染时序问题； - ✅ 清晰职责分离：
validateForm()专注校验与提交控制；状态持久化由独立生命周期钩子管理。
通过以上调整，用户每次打开表单时，supervisor 和 substation 将自动回显上次选择，大幅提升多轮填报体验。
