如何覆盖initState使其仅在页面首次访问生效，解决筛选后回退回到初始状态问题

核心思路是给initState方法加执行限制，仅在页面首次加载时触发，后续访问（前进后退、刷新等场景）都跳过执行，以下是两种可直接落地的实现方案：

方案1：基于sessionStorage标记实现（适配绝大多数业务场景） #

sessionStorage会在当前标签页的整个会话周期内留存数据，页面刷新、前进后退都不会清除，仅关闭标签页时才会重置，刚好匹配「首次进入页面触发初始筛选项，后续操作保留用户筛选状态」的需求。

原代码（错误写法，每次页面加载都会触发initState） #

UniversalFilter.initState({
  category: "指定分类",
  filter: "指定筛选项"
})

修改后代码 #

// 判断是否已经初始化过筛选状态
if (!sessionStorage.getItem("filter_has_initialized")) {
  UniversalFilter.initState({
    category: "指定分类",
    filter: "指定筛选项"
  })
  // 标记已初始化，后续页面访问不再触发
  sessionStorage.setItem("filter_has_initialized", "true")
}

方案2：重写initState方法加执行锁（适合多入口调用initState的项目） #

如果你的项目里有多个位置可能调用initState方法，可以直接重写原脚本的initState方法，从根源上限制它仅执行一次：

// 保存原initState方法
const originalInit = UniversalFilter.initState
// 全局执行标记
let initStateExecuted = false
// 重写方法
UniversalFilter.initState = function(options) {
  if (!initStateExecuted) {
    originalInit.call(this, options)
    initStateExecuted = true
  }
}

// 后续不管任何位置调用多少次initState，都只会第一次生效
UniversalFilter.initState({
  category: "指定分类",
  filter: "指定筛选项"
})

注意事项 #

• 检查代码中是否有监听popstate事件（浏览器前进后退触发的事件）时主动调用initState的逻辑，如有需要删除该调用，或给该调用加上和上面一致的执行判断
• 如果需要初始状态仅在用户首次访问站点时生效、关闭浏览器再打开也不触发，可以把方案1中的sessionStorage替换为localStorage

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