url参数拼接必须用encodeuricomponent对每个值单独编码,禁用encodeuri;跳转优先用location.replace或history.pushstate+assign;表单提交用get自动编码;取参用urlsearchparams;敏感信息严禁入url。

URL参数拼接必须用encodeURIComponent编码
直接拼字符串传中文、空格、斜杠或特殊符号(如&、=、?)会导致参数截断或解析错误。浏览器只把第一个&前的内容当路径,后面全被当参数;如果值里自带=,接收方会误判键名边界。
正确做法是:对每个参数值单独编码,再拼进URL:
const name = "张三";
const query = `name=${encodeURIComponent(name)}&id=123`;
const url = `/detail.html?${query}`;
// → /detail.html?name=%E5%BC%A0%E4%B8%89&id=123
注意:encodeURI不能替代encodeURIComponent——它不编码/、?、&等URL保留字符,拼接时极易破坏结构。
跳转时避免手动拼接location.href覆盖历史记录
用location.href = url会触发完整页面跳转并新增一条历史记录,但若用户点返回,可能回到一个带脏参的中间页(比如搜索页反复带旧关键词)。更可控的方式是:
立即学习“前端免费学习笔记(深入)”;
- 用
location.replace(url):替换当前记录,不留下跳转痕迹 - 用
history.pushState()+location.assign()组合(适合单页应用路由场景) - 表单提交时用
<form method="GET"></form>,浏览器自动编码+拼参,最省心且兼容性好
接收参数别依赖location.search手撕字符串
从location.search里取值,硬拆?和&再split('='),遇到重复键(如?tag=a&tag=b)、空值(?x=&y=1)、未编码值(?q=hello world)就容易出错。
推荐用原生URLSearchParams(Chrome 49+/Firefox 29+/Safari 10.1+):
const params = new URLSearchParams(location.search);
console.log(params.get('name')); // 自动解码,返回"张三"
console.log(params.getAll('tag')); // 支持多值
IE不支持?补个轻量polyfill,或用现成库如query-string,别自己写解析逻辑。
敏感参数绝不能走URL传
URL会被浏览器地址栏显示、保存在历史记录、泄露到Referer头、记录在服务器日志甚至代理缓存中。密码、token、用户ID、手机号等一律禁止出现在URL里。
替代方案:
- 跳转前存到
sessionStorage,目标页读取后立即removeItem - 用
postMessage(跨域需指定targetOrigin) - 服务端跳转(302)配合session或临时token
哪怕只是“用户昵称”,只要含隐私倾向(比如可反推账号),也建议走存储中转——URL不是保险箱,是明信片。










