本文介绍如何使用 JavaScript 的 localStorage 在纯前端场景下持久化保存两个依赖型下拉框（省/市）的用户选择，确保页面刷新或表单提交后仍能自动恢复选中值，无需 PHP 服务端逻辑介入。
本文介绍如何使用 javascript 的 `localstorage` 在纯前端场景下持久化保存两个依赖型下拉框（省/市）的用户选择，确保页面刷新或表单提交后仍能自动恢复选中值，无需 php 服务端逻辑介入。
在构建动态表单时，常需实现「省→市」这类级联下拉框（也称依赖下拉框），且要求用户体验连贯：即使用户刷新页面、意外离开后再返回，或提交表单后服务端重定向回当前页，已选中的省、市值都应被保留。传统方案常依赖 PHP 模板中嵌入 $_POST 判断（如
现代浏览器提供的 localStorage API 正是解决此类客户端状态持久化的理想工具——它可在用户本地长期存储字符串键值对，且不受页面刷新影响。结合事件监听与 DOM 操作，我们可完全在前端完成「保存 → 恢复 → 触发联动」全流程。
以下为完整、健壮的实现方案：
✅ 核心步骤说明
- 初始化省下拉框：遍历 provinceObject 键名，动态生成
- 绑定省变更事件：当用户切换省份时，清空并重建市级选项，并立即保存当前省值；
- 同步保存市级值：为 #city 绑定 change 事件，保存其选中值；
- 页面加载时恢复状态：从 localStorage 读取上次保存的 province 和 city，设置 select.value，并手动触发 change 事件以激活市级联动逻辑；
- 关键细节：必须在设置 provinceSel.value 后调用 dispatchEvent(new Event('change'))，否则市级下拉框不会自动更新——这是许多开发者遗漏的核心点。
? 完整可运行代码
<!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>province</b></td>
<td>
<select name="province" id="province">
<option value="" disabled selected>select your province</option>
</select>
</td>
</tr>
<tr>
<td dir="rtl" style="text-align: center"><b>city</b></td>
<td>
<select name="city" id="city">
<option value="" disabled selected>select your city</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="submit" name="sign-up" id="sign-up"
value="submit"
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️⃣ 初始化省份下拉框
provinceSel.innerHTML = '<option value="" disabled selected>select your province</option>' +
Object.keys(provinceObject)
.map(p => `<option value="${p}">${p}</option>`)
.join("");
// 2️⃣ 省份变更：更新城市 + 保存省份
provinceSel.addEventListener("change", function() {
// 清空城市选项（保留首项提示）
citySel.innerHTML = '<option value="" disabled selected>select your city</option>';
const cities = provinceObject[this.value];
if (cities) {
const cityOptions = Object.keys(cities)
.map(c => `<option value="${c}">${c}</option>`)
.join("");
citySel.innerHTML += cityOptions;
}
// ✅ 保存当前选中的省份
localStorage.setItem("province", this.value);
});
// 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 存在对应 option）
if (savedCity && citySel.querySelector(`option[value="${savedCity}"]`)) {
setTimeout(() => {
citySel.value = savedCity;
}, 0);
}
}
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- 兼容性：localStorage 支持所有现代浏览器（IE8+），若需支持更旧环境，可降级为 sessionStorage 或 Cookie；
- 数据清理：用户更换省份后，原城市值可能失效（如 province1 下无 2city1p2），此时 savedCity 可能为空或无效。代码中已通过 querySelector 校验选项存在性，避免静默失败；
- 表单提交干扰：localStorage 不影响表单正常提交；若需在提交后清除状态（如注册成功跳转），可在 form.onsubmit 中调用 localStorage.removeItem("province"); localStorage.removeItem("city");；
- 安全性提示：localStorage 数据可被用户轻易查看/修改，绝不可用于存储敏感信息（如 token、密码），此处仅用于 UI 状态，符合安全边界；
- 无障碍增强：示例中使用 disabled selected 提示项替代 value="1" 占位符，语义更清晰，利于屏幕阅读器识别。
通过以上方案，你彻底摆脱了 PHP 模板硬编码的繁琐逻辑，以简洁、可维护、纯前端的方式实现了级联下拉框的状态持久化——既满足客户端验证优先的设计原则，又显著提升了代码的可读性与可移植性。
立即学习“前端免费学习笔记（深入）”；
