data-* 属性仅用于挂载、传递和标记，不可替代持久化存储；真正需保存的参数应使用 url 查询字符串、localstorage 或后端接口。
data-* 属性不是链接参数的“保存容器”，它只负责挂载、传递、标记——真要保存参数，得靠 URL 查询字符串、localStorage 或后端接口。
为什么直接改 href 为 data-href 是常见但危险的操作
很多人把 href 值挪到 data-href 是为了临时禁用跳转，等条件满足再触发。但容易忽略三点：
- 移除
href后，该元素失去原生可访问性（键盘 Tab 不聚焦、屏幕阅读器不识别为链接） -
data-href值不会参与浏览器历史记录、书签导出或 SEO 抓取 - 若后续用
location.href = el.dataset.href跳转，而dataset.href未定义（比如命名是data-target-url），会静默失败跳到"about:blank"
正确做法：保留 href，用 event.preventDefault() 拦截默认行为，再按需处理逻辑。
getAttribute('data-xxx') 比 dataset.xxx 更稳地读取链接参数
当 HTML 中写的是 <a data-api-endpoint="/v1/users" data-method="POST"></a>，别直接用 el.dataset.apiEndpoint —— 它在 Safari 15 以下或含数字/大写的属性名（如 data-v2-token）上可能返回 undefined。
实操建议：
- 统一用
el.getAttribute('data-api-endpoint')，原样拿字符串，无转换、无静默失败 - 如果值是 JSON（如
data-config='{"timeout": 5000}'），必须加try/catch：JSON.parse(el.getAttribute('data-config') || '{}') - 判断参数是否存在？用
el.hasAttribute('data-required')，而不是el.dataset.required !== undefined
下拉框联动跳转时，data- 参数怎么组织才不翻车
典型场景：两个 <select></select> 分别控制 category 和 sort，选完立刻拼 URL 跳转。关键不是“能不能存”，而是“怎么存才可靠”：
- 每个
<option></option>只存一个维度的参数，比如<option data-category="books"></option>+<option data-sort="newest"></option>，避免塞进data-params='{"cat":"books","sort":"newest"}'这种结构化字符串 - 监听
change事件时，先检查el.value是否为空（防止默认空选项触发跳转），再分别读取两个 select 的getAttribute('data-xxx') - 拼 URL 用
URLSearchParams，别手拼?a=1&b=2：const params = new URLSearchParams(); params.set('cat', catVal); params.set('sort', sortVal); location.href = `/list?${params}`
真正需要“保存”的链接参数，该存在哪
data- 属性刷新即丢，它根本不适合做持久化存储。如果你发现页面 reload 后要“恢复上次选中的筛选项”，说明你已越界使用 data-：
- 用户主动选择的参数（如分页页码、排序字段）→ 存
localStorage，并在DOMContentLoaded后回填表单 + 设置data-标记 - 服务端下发的初始配置（如默认地区、语言）→ 由 SSR 渲染到
data-，但 JS 初始化后立即提取并存入模块级常量或Map，后续操作不再依赖 DOM 读取 - 涉及权限或时效性的参数（如 token、timestamp）→ 绝对不放
data-，应通过 JS 变量 + 一次性的 API 请求携带
最容易被忽略的一点：当你在 data- 里反复读写同一个参数来驱动 UI 状态（比如 data-loading="true" → 切换按钮文字），其实已经把 DOM 当成了状态管理器——这会让调试变得困难，且无法响应 React/Vue 等框架的响应式更新。该交还给 JS 变量或状态库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
