本文介绍如何使用 localstorage 在纯前端环境下持久化保存两个依赖型下拉框（省/市）的用户选择，确保页面刷新或表单提交后仍自动恢复上次选中值，无需 php 服务端逻辑，完全基于 javascript 实现。
本文介绍如何使用 localstorage 在纯
前端
环境下持久化保存两个依赖型下拉框（省/市）的用户选择，确保页面刷新或
表单提交
后仍自动恢复上次选中值，无需 php 服务端逻辑，完全基于 javascript 实现。
在构建动态表单时，两级联动下拉框（如“省份 → 城市”）十分常见。当用户完成选择并提交表单，或因验证失败需回显数据时，若仅依赖服务端渲染（如 PHP 的 ），不仅代码冗余、维护困难，还违背了“客户端验证优先”的设计原则。本文提供一套
纯前端、轻量、可复用
的解决方案：利用 localStorage 持久化用户选择，并结合现代 DOM 操作与事件机制，实现选中状态的自动还原与联动更新。
✅ 核心思路
使用 localStorage 存储用户最后一次成功选择的 province 和 city 值；
页面加载完成（DOMContentLoaded）后，优先从 localStorage 读取并设置下拉框值；
触发 change 事件手动激活联动逻辑（确保城市列表正确生成并选中）；
在 change 事件监听器中实时更新 localStorage，保证状态同步。
? 完整实现代码
⚠️ 注意事项与最佳实践
setTimeout(..., 0) 的必要性
：由于 provinceSel.dispatchEvent('change') 是异步触发城市渲染，直接设置 citySel.value 可能因 DOM 尚未更新而失效；使用微任务延迟可确保城市
两级联动下拉框状态保持