本文介绍如何使用 localstorage 在纯前端环境下持久化保存两个依赖型下拉框（省/市）的用户选择，确保页面刷新或表单提交后仍自动恢复上次选中值，无需 php 服务端逻辑，完全基于 javascript 实现。
本文介绍如何使用 localstorage 在纯前端环境下持久化保存两个依赖型下拉框（省/市）的用户选择，确保页面刷新或表单提交后仍自动恢复上次选中值，无需 php 服务端逻辑，完全基于 javascript 实现。
在构建动态表单时，两级联动下拉框（如“省份 → 城市”）十分常见。当用户完成选择并提交表单，或因验证失败需回显数据时，若仅依赖服务端渲染（如 PHP 的 ），不仅代码冗余、维护困难，还违背了“客户端验证优先”的设计原则。本文提供一套纯前端、轻量、可复用的解决方案：利用 localStorage 持久化用户选择，并结合现代 DOM 操作与事件机制，实现选中状态的自动还原与联动更新。
✅ 核心思路
- 使用 localStorage 存储用户最后一次成功选择的 province 和 city 值；
- 页面加载完成（DOMContentLoaded）后，优先从 localStorage 读取并设置下拉框值；
- 触发 change 事件手动激活联动逻辑（确保城市列表正确生成并选中）；
- 在 change 事件监听器中实时更新 localStorage，保证状态同步。
? 完整实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两级联动下拉框状态保持</title>
</head>
<body>
<form method="post" name="SignUpForm" id="SignUpForm">
<table frame="box">
<tr>
<td dir="rtl" style="text-align: center"><b>省份</b></td>
<td>
<select name="province" id="province">
<option value="" disabled selected>请选择省份</option>
</select>
</td>
</tr>
<tr>
<td dir="rtl" style="text-align: center"><b>城市</b></td>
<td>
<select name="city" id="city">
<option value="" disabled selected>请选择城市</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; padding-top: 15px;">
<input type="submit" name="sign-up" id="sign-up"
value="提交"
style="font-weight: bold; font-size: large; background-color: mediumseagreen; color: darkred">
</td>
</tr>
</table>
</form>
<script>
const provinceObject = {
"province1": { "1city1p1": [1], "1city2p1": [2], "1city3p1": [3] },
"province2": { "2city1p2": [4], "2city2p2": [5], "2city3p2": [6] },
"province3": { "3city1p3": [7], "3city2p3": [8], "3city3p3": [9] }
};
document.addEventListener("DOMContentLoaded", function () {
const provinceSel = document.getElementById("province");
const citySel = document.getElementById("city");
// 1️⃣ 初始化省份下拉框
const provinces = Object.keys(provinceObject);
provinceSel.innerHTML = `<option value="" disabled selected>请选择省份</option>` +
provinces.map(p => `<option value="${p}">${p}</option>`).join("");
// 2️⃣ 省份变更：动态生成并填充城市选项
provinceSel.addEventListener("change", function () {
const selectedProvince = this.value;
citySel.innerHTML = `<option value="" disabled selected>请选择城市</option>`;
if (selectedProvince && provinceObject[selectedProvince]) {
const cities = Object.keys(provinceObject[selectedProvince]);
const cityOptions = cities.map(c => `<option value="${c}">${c}</option>`).join("");
citySel.innerHTML += cityOptions;
}
// ✅ 同步保存省份选择（可选：立即存，也可在 change 后统一存）
localStorage.setItem("province", selectedProvince);
});
// 3️⃣ 城市变更：仅保存选择，不触发联动
citySel.addEventListener("change", function () {
localStorage.setItem("city", this.value);
});
// 4️⃣ 页面加载时：恢复历史选择（关键步骤！）
const savedProvince = localStorage.getItem("province");
const savedCity = localStorage.getItem("city");
if (savedProvince && provinceSel.querySelector(`option[value="${savedProvince}"]`)) {
provinceSel.value = savedProvince;
// 手动触发 change 以加载对应城市列表
provinceSel.dispatchEvent(new Event("change"));
// 等待城市列表渲染完成后再设置 city 值（确保 DOM 已更新）
setTimeout(() => {
if (savedCity && citySel.querySelector(`option[value="${savedCity}"]`)) {
citySel.value = savedCity;
}
}, 0);
}
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- setTimeout(..., 0) 的必要性：由于 provinceSel.dispatchEvent('change') 是异步触发城市渲染，直接设置 citySel.value 可能因 DOM 尚未更新而失效；使用微任务延迟可确保城市
- 空值与容错处理：代码中加入了 disabled selected 占位选项，并校验 provinceObject[selectedProvince] 是否存在，避免因非法值导致脚本中断。
- 清除状态：如需重置（例如用户点击“重填”按钮），调用 localStorage.removeItem("province"); localStorage.removeItem("city"); 即可。
- 兼容性：localStorage 支持所有现代浏览器（IE8+），若需支持更老环境，可降级为 sessionStorage 或 cookie（需额外封装）。
- 安全性提示：localStorage 数据可被用户轻易修改，切勿用于存储敏感信息或绕过服务端校验——它仅服务于用户体验优化。
✅ 总结
通过 localStorage + DOMContentLoaded + dispatchEvent 的组合，我们彻底摆脱了 PHP 模板嵌入式选中逻辑，实现了真正解耦、可维护、高性能的前端状态持久化。该方案不仅适用于两级联动，还可轻松扩展至三级（如“省→市→区”）甚至更复杂的动态表单场景。记住：状态交由客户端管理，验证仍须服务端兜底——这才是健壮 Web 表单的黄金法则。
