data-属性不能用于页面跳转传参，仅限当前dom临时元信息；跨页需用url参数、localstorage或cookie等方案。
data- 属性不能用于页面跳转时传递参数。
它只在当前页面 DOM 节点上有效，页面一跳转、刷新或新开标签页，所有 dataset 值就彻底丢失。这不是设计缺陷，而是它的定位本来就是“当前元素的临时元信息”，不是数据存储或跨页通信机制。
data- 属性在跳转中常见的误用场景
- 把参数写进
<a href="page.html" data-id="123"></a>，然后指望目标页用document.getElementById('app').dataset.id读到 - 在跳转前用 JS 读取
element.dataset.xxx，但忘记拼进 URL 或存到localStorage - 以为
data-和 React 的 props 一样能“透传”，结果 B 页面压根没那个 HTML 结构，更没有那段data-
这些都会导致目标页读不到值，且无报错、难调试。
真正能跨页面传递参数的方案（按推荐顺序）
使用 URL 查询参数：最轻量、可靠、无需 JS 运行时支持
window.location.href = "b.html?id=123&name=alice"
接收页用new URLSearchParams(window.location.search)解析
✅ 兼容所有浏览器，支持书签、分享、后退，参数明文可查
❌ 不适合敏感信息（如 token）、超长内容（URL 长度限制约 2000 字符）使用
localStorage（或sessionStorage）
跳转前存：localStorage.setItem("user_id", "123")
目标页读：localStorage.getItem("user_id")
✅ 可存较大数据（5–10MB），支持结构化值（需JSON.stringify）
❌ 同源限制；新开标签页可读，但关闭浏览器后sessionStorage清空；需手动清理使用
cookie
适合带过期、路径、安全标记的低频小数据（如登录态）
❌ 需处理HttpOnly、SameSite等安全配置；每次请求自动携带，有性能开销父子窗口通信（仅限
window.open场景）
父页：const win = window.open("child.html")
子页：window.opener?.document或window.opener.postMessage()
❌ 仅适用于弹窗，现代浏览器对跨域弹窗限制严格，不适用于常规导航
如果你非要用 data-，只能作为“跳转前的中间载体”
比如：
<a href="b.html" data-id="456" data-type="report" id="jump-link">跳转</a>
配合 JS：
document.getElementById("jump-link").addEventListener("click", function(e) {
e.preventDefault();
const { id, type } = this.dataset;
window.location.href = `b.html?id=${encodeURIComponent(id)}&type=${encodeURIComponent(type)}`;
});
注意两点：
- 必须显式阻止默认跳转（
e.preventDefault()） - 中文或特殊字符必须
encodeURIComponent()，否则 URL 解析失败
data- 属性本身不参与跳转流程，它只是你写在 HTML 里的“便利便签”。真正把参数送过去，还得靠 URL、storage 或通信 API。最容易被忽略的是：不编码中文参数、不处理空格和符号、混淆了“当前页读取”和“下一页读取”的时机——这些都会让参数在目标页变成 null 或 undefined。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
