本文介绍如何使用 localstorage 在 web 表单提交后自动保存并恢复两个关键下拉框（如负责人、变电站）的选中状态，避免页面刷新或跳转导致值丢失，确保用户体验连续。
本文介绍如何使用 localstorage 在 web 表单提交后自动保存并恢复两个关键下拉框（如负责人、变电站）的选中状态，避免页面刷新或跳转导致值丢失，确保用户体验连续。
在构建数据录入类表单（尤其是 Google Apps Script HTML Service 前端）时，一个常见痛点是：用户提交表单后页面重载（或跳转），所有 <select></select> 下拉框重置为初始空值，需重新选择——不仅降低效率，还易引发操作失误。问题根源在于：表单提交触发了页面生命周期重置，而 validateForm() 中调用 prefillDropdowns() 的时机错误——此时 DOM 尚未重新渲染，且 localStorage 数据尚未被读取应用。
✅ 正确实现逻辑：分离「保存」与「恢复」时机
-
保存动作（
saveSubmittedValues）应放在表单验证通过后、提交前，这是合理的； -
恢复动作（
prefillDropdowns）绝不能在validateForm内调用，因为：- 表单提交后浏览器会导航（即使
action="= getUrl() ?>"是同页重载），当前 JS 上下文将被销毁； - 此时调用
prefillDropdowns()对即将消失的 DOM 无效，且getParcels(substation)异步请求可能失败或无意义。
- 表单提交后浏览器会导航（即使
✅ 正确做法是：将 prefillDropdowns() 移至页面加载完成时执行，确保 DOM 已就绪、选项已渲染完毕，再从 localStorage 恢复值并触发级联逻辑。
? 关键修复代码（替换原 window.onload）
// 替换原来的：window.onload = setDefaultDate;
window.onload = function() {
setDefaultDate(); // 设置默认日期
prefillDropdowns(); // ✅ 此时 DOM 完全加载，可安全读取 localStorage 并填充下拉框
};
同时，务必从 validateForm() 中移除 prefillDropdowns() 调用：
function validateForm() {
// ... 字段校验逻辑（保持不变）
if (!supervisor || !substation || /* 其他字段 */ ) {
document.getElementById("submit-message").innerText = "All fields must be filled.";
return false;
}
// ✅ 仅保存，不恢复
saveSubmittedValues();
// ❌ 删除这一行：prefillDropdowns(); ← 错误时机！
document.getElementById("submit-button").disabled = true;
return true;
}
⚠️ 注意事项与增强建议
-
级联下拉依赖顺序：
prefillDropdowns()中先设置substation值，再调用getParcels(substation)，这要求#substation下拉框的<option></option>必须已在 HTML 中静态存在（如你代码中的var subs = getDistinctSubstations(); ?>渲染），否则getElementById("substation").value = substation将静默失败。 -
getParcels的异步安全性：getParcels()使用google.script.run，其回调中操作#parcel下拉框，因此prefillDropdowns()中的getParcels(substation)调用是安全的——它只发起请求，真正填充由服务端响应后回调完成。 -
清除过期数据（可选）：若需在用户登出或切换场景时清空记忆，可添加：
// 例如，在登出按钮点击时 function clearFormMemory() { localStorage.removeItem("supervisor"); localStorage.removeItem("substation"); } -
兼容性兜底：
localStorage在无痕模式或禁用时会抛错，建议封装写入逻辑：function safeSetItem(key, value) { try { localStorage.setItem(key, value); } catch (e) { console.warn("localStorage not available:", e); } }
通过以上调整，用户每次打开表单时，#supervisor 和 #substation 将自动恢复上次提交的值，并正确触发后续级联（如加载对应 #parcel 选项），真正实现「所见即所记」的无缝体验。
