无框架JS单页应用queryString已更新但脚本无法正确解析

你遇到的解析失效问题，本质是状态数据源不一致：

• 给出的示例代码能正常运行，是因为它全程靠一个手动维护的全局queryString变量模拟状态流转：每次更新状态时手动拼接新的query字符串，直接赋值给这个变量，再传给解析函数处理，同时模拟URL更新的效果，完全不依赖真实的浏览器URL，所以不会有同步问题。
• 到真实应用里，你把示例中模拟URL更新的console.log换成了真实的window.history.pushState，但只要存在以下任意一种实现失误，就会出现你描述的“URL看起来更新了，但解析永远是旧值”的现象：
  • 解析函数updateApp被调用时，传入的query参数不是刚刚生成的最新值，而是函数作用域里残留的初始旧值、或者页面加载时缓存的旧query字符串
  • 解析函数内部没有实时读取浏览器当前的URL参数，而是直接复用了页面初始化时保存的window.location.search快照
  • 拼接传给pushState的URL时，没有正确把新生成的query字符串拼到当前路径后面，导致地址栏显示的URL和JS运行时实际读取的URL路径不匹配

既然要把URL的queryString作为整个应用的单一可信源，就没必要额外手动维护独立的queryString全局变量，整个状态流转要严格围绕浏览器实际的URL执行：

1. 响应用户交互，修改本地的状态缓存对象（比如示例里的appState）
2. 把状态对象序列化为标准格式的query字符串，调用window.history.pushState把更新后的完整URL写入浏览器历史，完成地址栏的同步
3. 同步触发UI更新逻辑：实时从window.location.search读取当前最新的query字符串，用URLSearchParams解析为参数对象，再把参数同步到DOM的data-*属性、触发对应的UI变更函数

• 不要在页面初始化时一次性缓存window.location.search的值，UI更新逻辑执行时必须实时读取最新的URL参数，否则永远拿到的是页面首次加载时的旧快照
• history.pushState是同步执行的，调用完成后立刻就能读取到最新的window.location.search值，不需要额外等待异步时机
• pushState不会触发popstate等浏览器导航事件，因此每次手动更新URL后，必须同步调用一次UI更新逻辑，不能依赖浏览器的导航事件自动触发状态同步
• 拼接query参数时，要对参数的key和value做encodeURIComponent编码，避免特殊字符、空格导致的参数截断、解析错位
• 对需要存储的布尔类型状态，统一在序列化时转成字符串"true"/"false"存储，解析时再转回布尔类型，避免类型混杂导致的判断逻辑异常

内容的提问来源于stack exchange，提问作者Rounin