内容摘要：搜索框里敲下关键词，点查询，列表刷新了。然后你翻到第二页，点开一条详情，返回，发现筛选条件全没了——又得重新选一遍分类、时间范围、状态。这种体验，用过后台管理系统的朋友应该都不陌生。 JS里保存搜索条

搜索框里敲下关键词，保留点查询，搜索列表刷新了。条件然后你翻到第二页，保留点开一条详情，搜索返回，条件发现筛选条件全没了——又得重新选一遍分类、保留时间范围、搜索状态。条件这种体验，保留用过后台管理系统的搜索朋友应该都不陌生。

JS里保存搜索条件这事，条件说难真不难，保留说简单也藏着几个坑。搜索最直接的条件做法就是扔进sessionStorage或者URL参数里。sessionStorage的好处是关掉页面就自动清，不会把垃圾数据留在用户浏览器里。URL参数则更“透明”，刷新、分享链接都能还原条件，但长条件列表会把地址栏撑得很难看。

我见过不少团队的做法是：查询按钮点下去的时候，把表单里所有的值序列化成一个对象，塞进sessionStorage。等用户从详情页返回列表页，在created或mounted钩子里读出来，再Object.assign回表单的data。代码量不大，十分钟就能写完。

但问题往往出在“什么时候存”和“什么时候清”上。

存得太频繁，用户还没输完就触发保存，恢复的时候可能拿到半截输入。存得太晚，用户跳走前没来得及写进storage，等于白搭。我习惯在路由离开的beforeRouteLeave里做一次保存，或者用watch监听表单对象，配合debounce延迟300毫秒再写入——这样既不会频繁操作storage，也不会丢数据。

清除的时机更关键。搜索条件不该是永久记忆。用户主动清空了筛选条件，点了“重置”，你就得把storage里的旧数据删掉，否则下次进来又恢复出早已不需要的条件，反而碍事。还有种情况：用户从列表页跳去详情，再返回列表，这时候希望恢复条件；但如果用户是从菜单栏重新点进这个列表页，他大概率想要一个干净的初始状态，而不是上次翻到第三页的筛选结果。

区分这两个场景的办法很简单——在路由的query里加一个标记参数，比如?from=detail。列表页初始化的时候检查这个参数，有就恢复条件，没有就直接跳过。这个细节很多人没注意，结果用户从菜单点进来，看到的还是上回筛选的“已关闭工单”，一脸茫然。

用URL参数保存条件还有个额外好处：分页页码可以跟着走。比如你筛选了“状态=处理中”，翻到第5页，把这个条件拼到URL上，刷新页面还能停留在第5页，而不是回到第1页。实现上就是this.$router.replace({ query: { ...this.$route.query, page: 5, status: 'processing' } })。注意用replace而不是push，否则浏览器的后退键会变成一步步回退筛选历史，能把人逼疯。

最后说个真实案例。之前给一个订单管理系统做优化，运营同事每天要查几十次“待发货”订单，每次进页面都要点三个下拉框再点查询。我做了个最简单的sessionStorage缓存，把“状态=待发货”记住。第二天她跟我说，感觉页面“变聪明了”。实际上就是少点了三下鼠标，但体验差距就是这么明显。

保存搜索条件这件事，本质上是跟用户的操作预期做一次对齐。他离开的时候在想什么，回来的时候就应该还看到什么。技术实现不复杂，复杂的是判断什么时候该记、什么时候该忘。记多了是负担，记少了是白做。把握住这个度，你的页面就比大多数后台系统好用一截。