data-*属性无法跨页面传递，刷新即失效；跨页面需用URL参数、localStorage或服务端session，其中URL参数最轻量可靠，localStorage可跨标签页共享但需手动读写。
data-* 属性无法跨页面传递，刷新即失效
浏览器中 data-* 属性只绑定在当前 DOM 节点上，属于瞬时内存状态。页面刷新、跳转或新开标签页后，所有 data-* 值都会丢失——它不是存储机制，只是临时挂载的标记。
常见错误现象：在 A 页面给 <div id="app" data-theme="dark"> 写了配置，B 页面用 document.getElementById('app').dataset.theme 读不到，因为 B 页面压根没有那个元素，更没有那段 HTML。
- 别指望靠
data-*实现“从登录页传到个人中心页”这类跨页面场景 - 如果只是组件内部父子传递（如 React/Vue 中的 props 下发），
data-*可以作为调试辅助，但不应作为数据通道 - 想持久化？必须走
localStorage、sessionStorage、URL 参数或服务端 session
URL 参数是唯一零依赖、可跨域（同协议）的跨层级传递方式
通过 href 或 form[method="GET"] 把参数拼进 URL，接收页用 URLSearchParams 解析，这是最轻量、最可靠、不依赖 JS 运行时的方案。
使用场景：搜索关键词、分页页码、主题模式切换（?theme=dark）、用户 ID 跳转等低敏感、小体积参数。
立即学习“前端免费学习笔记（深入）”；
- 发送页：
<a href="profile.html?uid=123&tab=posts">进入个人页</a> - 接收页：
const params = new URLSearchParams(window.location.search); const uid = params.get('uid'); - 中文或特殊字符必须先
encodeURIComponent()，否则解析会截断或乱码 - 注意长度限制：多数浏览器对 URL 总长限制在 2048 字符以内，超长参数会静默截断
localStorage 是跨页面共享配置的实际主力，但需手动同步
localStorage 是真正能跨 HTML 文件、跨刷新、跨标签页共享数据的客户端机制，但它不自动“传递”，需要你显式写入 + 显式读取。
性能与兼容性影响：写入是同步阻塞操作；读取极快；IE8+ 全支持；但受同源策略限制（https://a.com 和 http://a.com 视为不同源）。
- 写入页：
localStorage.setItem('userConfig', JSON.stringify({ theme: 'dark', lang: 'zh' })); - 读取页：
const config = JSON.parse(localStorage.getItem('userConfig') || '{}'); - 不要直接存对象，必须
JSON.stringify()；读取时要处理null返回值 - 监听变更可用
window.addEventListener('storage', handler)，但仅在其他标签页触发修改时才触发，当前页写入不触发自身事件
CSS 自定义属性（--xxx）只能沿 DOM 树向下继承，不能跨页面或跨 Shadow DOM
CSS 变量本质是样式继承机制的一部分，它的作用域严格受限于 CSS 层叠规则和 DOM 结构。它不是数据容器，不能“传递”到另一个 HTML 文档中。
容易踩的坑：有人把 --api-base="https://dev.api" 写在 <html style="--api-base: ..."> 上，以为 JS 里能全局读取——但 getComputedStyle(document.documentElement).getPropertyValue('--api-base') 确实能拿到，这仅限于当前页面；换一个 HTML 文件，就得重新设置。
- 安全注入方式是内联
style="--config: value"到具体容器元素，而非依赖外部 CSS 规则 - 子元素拿不到变量？先查 DevTools 的 Computed 面板，看该变量是否显示为有效值；空字符串 = 上游没传下来
- Web Components 中优先用
:host { --xxx: yyy; }，比 class 更可控
跨页面配置传递的本质不是“怎么注入标签”，而是“选哪个持久化层”。data-* 是幻觉，URL 是快照，localStorage 是保险箱，CSS 变量 是皮肤——用错地方，连报错都不会给你。
