首页/新闻资讯/正文详情

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

发布时间:2026/9/27 10:04:42 来源:云帆数科 栏目:资讯中心
用 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编写和执行。示例不是产品源码或实机测试报告。

相关推荐

百度怎么对网站处罚实战对比评测:备案避坑全解析
百度怎么对网站处罚实战对比评测:备案避坑全解析

百度怎么对网站处罚实战对比评测:备案避坑全解析 做站最怕啥?不是代码报错,也不是服务器宕机,而是辛辛苦苦运营的站点,突然有一天在百度的搜索结果里彻底消失。你打开浏览器,地址栏显示“该网站未备案”或者“违规封禁”。这时候你才反应过来:… · 2026/9/27 10:04:11

网页编辑与网站编辑避坑速查手册:备案卡壳自救指南
网页编辑与网站编辑避坑速查手册:备案卡壳自救指南

网页编辑与网站编辑避坑速查手册:备案卡壳自救指南 备案流程一头雾水?别急,这份网页编辑与网站编辑速查手册能救急。很多站长卡在域名解析和服务器配置上,其实核心就三步。 网页编辑与网站编辑的区别到底在哪?… · 2026/9/27 10:03:59

2026最新手机网页如何制作:告别模板丑陋,SEO实战指南
2026最新手机网页如何制作:告别模板丑陋,SEO实战指南

2026最新手机网页如何制作:告别模板丑陋,SEO实战指南 还在为模板网站的丑和僵化头疼?很多老板看着网上那些千篇一律的模板,心里直嘀咕:这玩意儿根本没法用,既显不出公司实力,又抓不住用户。 2026年的移动端流量竞争已经卷到了极致,… · 2026/9/27 10:03:53

一个云主机怎么挂两个网站速查手册:小白避坑指南
一个云主机怎么挂两个网站速查手册:小白避坑指南

一个云主机怎么挂两个网站速查手册:小白避坑指南 自己不会代码想做网站,最怕的就是搞懂服务器配置后,发现资源不够用或者怕配错了把站搞崩。很多人以为一台云主机只能跑一个站,其实只要会配置… · 2026/9/27 10:56:21

Agilent 53150A频率计:高精度时间测量与Allan方差实战指南
Agilent 53150A频率计:高精度时间测量与Allan方差实战指南

1. 这台“老伙计”不是摆设:Agilent 53150A 频率计的真实定位与不可替代性你可能在实验室角落见过它——深灰色金属机箱,前面板布满密密麻麻的BNC接口、LED指示灯和一块略带泛黄的LCD屏。它不像新买的示波器那样有炫酷的触摸界面,也不像频谱仪… · 2026/9/27 10:56:03

rsuite Dropdown 图标定制实战:在菜单项中使用图标、快捷键与自定义渲染
rsuite Dropdown 图标定制实战:在菜单项中使用图标、快捷键与自定义渲染

前端UI组件 【免费下载链接】rsuite 🧱 A suite of React components . 项目地址: https://gitcode.com/gh_mirrors/rs/rsuite 点击查看 免费下载 rsuite 的 Dropdown 组件用于创建易于访问的下拉菜单,为用户提供多项可选操作。本文围绕文档… · 2026/9/27 10:55:57

新手向的 OpCore-Simplify 实操指南:把 OpenCore EFI 制作从两天压缩到半小时
新手向的 OpCore-Simplify 实操指南:把 OpenCore EFI 制作从两天压缩到半小时

新手向的 OpCore-Simplify 实操指南:把 OpenCore EFI 制作从两天压缩到半小时 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore-Simp… · 2026/9/27 10:55:57

告别论文焦虑!汇写论文AI智能写作一站搞定
告别论文焦虑!汇写论文AI智能写作一站搞定

每年毕业季,"论文"两个字就像一块沉甸甸的石头,压在无数专科、本科、硕士乃至博士学子的心头。选题没有方向、文献查不全、框架搭不起来、写出来的重复率居高不下、AIGC率一查就超标……一环卡住,步步被动。如今,这一切… · 2026/9/27 10:55:57

pixi 全局清单(Global Manifest)完全指南:pixi-global.toml 的结构、位置与全部配置项
pixi 全局清单(Global Manifest)完全指南:pixi-global.toml 的结构、位置与全部配置项

开发工具CLI包管理器任务调度 【免费下载链接】pixi Powerful system-level package manager for Linux, macOS and Windows written in Rust – building on top of the Conda ecosystem. 项目地址: https://gitcode.com/gh_mirrors/pi/pixi 点击查看 免费下载 pi… · 2026/9/27 10:55:51

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码