<p>data-* 属性是静态配置载体，非接口；dataset 读取为 undefined 主因是命名不合法（仅支持小写+连字符），且所有值均为字符串，需手动类型转换与 JSON 解析，写入须用 setAttribute 才能持久化。</p>
HTML data-* 属性不是接口，也不能“调用接口”；它只是把配置或静态参数塞进 DOM 的一种方式，后续得靠 JS 主动读取、拼接、发起请求。
为什么 dataset 读出来是 undefined
最常见原因是命名不合法：浏览器只认全小写 + 连字符的格式，比如 data-api-endpoint 合法，data-apiEndpoint 或 data_api_endpoint 都不会被解析进 dataset。
-
data-user-id→ 可读为element.dataset.userId -
data-2024-start→ 不能用点号访问，得写element.dataset["2024Start"] -
data-api--endpoint（双连字符）→ 被转成apiEndpoint，但语义已丢失，不可靠 - HTML 里写了
data-config='{"mode":"dev"}'，JS 里必须手动JSON.parse(element.dataset.config)，且要包try/catch
data-* 适合传什么，不适合传什么
它只适合传轻量、静态、可序列化的配置值，比如 API 地址、超时时间、默认页码。不适合传动态数据、对象嵌套结构、二进制内容或敏感信息。
- ✅ 推荐：
data-api-endpoint="/api/search"、data-timeout="5000"、data-default-page="1" - ❌ 禁止：
data-user="{...}"（对象会被当字符串）、data-token="xxx"（暴露凭证）、data-items="[...]"（大数组易出错且难维护） - ⚠️ 注意：
dataset拿到的全是字符串，data-active="false"读出来是字符串"false"，直接if (el.dataset.active)会判为真
怎么安全地读写 data-* 并用于接口调用
读取没问题，但写入不能只靠 dataset 赋值——它只是个只读代理，改了不反映在 DOM 上，刷新就丢。真正要持久化，必须用原生 API。
立即学习“前端免费学习笔记（深入）”；
- 读取配置：
const endpoint = document.getElementById('search-box').dataset.apiEndpoint; - 安全转类型：
const timeout = Number(document.dataset.timeout) || 8000; - 拼 URL：
fetch(`${endpoint}?q=${encodeURIComponent(query)}`) - 写入 DOM（需持久）：
el.setAttribute('data-last-search', Date.now().toString()); - 删除属性：
el.removeAttribute('data-last-search');
真正容易被忽略的是：dataset 不是响应式，也不触发 DOM 变更事件；它只是初始化时的一次性快照。如果你依赖它做状态同步，得自己加监听或换用其他机制（如 CustomEvent 或状态管理库）。
