用 URLSearchParams 保存筛选条件：空值、重复键与编码

米米商聊前端学习笔记列表有关键词、多个分类和排序方式时把筛选条件放进网址刷新或分享后才能回到同一视图。容易忽略的是同名参数可能出现多次空值和缺失的含义未必相同空格与加号也有不同的编码结果。本文使用自造地址讨论普通网页做法不代表米米商聊客户端内部实现。先定参数约定本例用 q 保存一个文字关键词kind 可出现多次代表多个分类空关键词不写入网址分类去空白和重复未知参数如 sort 保留。两个纯函数返回新网址或解析后的条件不会改变浏览器地址。exportfunctionsaveFilters(rawUrl,{keyword,kinds[]}{}){consturlnewURL(rawUrl);constparamsurl.searchParams;params.delete(q);params.delete(kind);constqkeyword.trim();if(q)params.set(q,q);constunique[...newSet(kinds.map(String).map(xx.trim()).filter(Boolean))];for(constkindofunique)params.append(kind,kind);returnurl.href;}exportfunctionreadFilters(rawUrl){constparamsnewURL(rawUrl).searchParams;return{keyword:params.get(q)??,kinds:params.getAll(kind).filter(Boolean)};}get(‘kind’) 只返回第一个值getAll(‘kind’) 才取得所有重复键。切换条件前删除旧 q 和 kind避免旧筛选累积。新 URL 保留 sort 的含义但重新序列化时原本写成 %20 的空格可能变成 不能承诺网址字节逐一不变。MDNURLSearchParams空值与编码缺少 q 时get(‘q’) 返回 null存在 q 时返回空字符串。本例把两者都交给界面作为空关键词。如业务要区分“从未设置”和“明确清空”再用 has(‘q’) 判断。MDN 空值示例用户输入交给 set 或 append 即可不要先自行百分号编码。例如输入 AB序列化后会保留加号的原意手工拼接 qAB 却可能把加号读成空格。MDN 加号说明 URLSearchParams 构造器也不解析完整网址因此示例先调用 new URL(rawUrl)。输入必须是合法绝对 URL否则会抛错。MDN 网址解析说明本地验证的边界示例已用 Node.js 内置断言执行十组检查覆盖重复分类、去重、空关键词、覆盖旧条件、保留未知参数、中文、加号、哈希、缺失参数和无效 URL全部通过。测试只验证纯函数没有接入真实搜索服务或浏览器路由接入界面后还应检验刷新、分享、后退和筛选值的对应关系。创作说明本文由AI辅助整理官方资料并起草代码与本地断言由AI编写和执行。示例不是产品源码或实机测试报告。