<p>data-* 属性可安全存储路径字符串，但需遵守HTML命名规范、用双引号包裹、对特殊字符实体编码或JSON序列化；读取应优先用getAttribute()配合JSON.parse()，修改必须用setAttribute()。</p>
data-* 属性能存路径字符串，但必须是合法 HTML 字符串
路径信息（如 /api/users/123、./assets/logo.svg、https://cdn.example.com/js/app.js）可以安全存在 data- 属性里，前提是它被当作纯字符串处理。浏览器不会解析、校验或转义路径内容，只做字面存储。
常见错误现象：
-
在 HTML 中写成未转义的&，导致属性值被截断为/api?x=1 -
data-path="C:\Users\name\file.txt"中反斜杠被 HTML 解析器误认为转义字符 - 路径含双引号
"或单引号'时，没对属性值加引号或转义，直接破坏 HTML 结构
正确做法：
- 始终用双引号包裹属性值：
data-api-endpoint="/v2/users"，而非data-api-endpoint=/v2/users - 服务端渲染时，对路径做 HTML 实体编码（如
&替代&），前端 JS 读取后无需再解码 - 避免在路径中混入未转义的
"、'、、<code>>；若必须含，优先用JSON.stringify()包一层再塞进属性（见下一条）
存带查询参数或特殊字符的路径，优先用 getAttribute() + JSON.stringify()
当路径含 &、=、空格、中文、emoji 或动态拼接成分时，直接写死易出错。更稳的方式是：服务端或构建时把路径对象序列化进 data- 属性，前端用 getAttribute() 读取后 JSON.parse()。
立即学习“前端免费学习笔记（深入）”；
示例 HTML：
<div id="loader" data-config='{"endpoint":"/api/items","params":{"page":1,"q":"hello world"}}'></div>JS 读取：
const el = document.getElementById('loader');
const raw = el.getAttribute('data-config');
let config = {};
try {
config = JSON.parse(raw);
} catch (e) {
console.warn('Invalid data-config', raw);
}
// config.endpoint → "/api/items"
// config.params.q → "hello world"
为什么不用 dataset.config？因为 dataset 会把 data-config 自动映射为 config，但一旦原始字符串含非法 JSON（比如字段名没引号、值含未转义引号），dataset.config 就返回 undefined 或静默失败——而 getAttribute() 至少能拿到原始字符串，你还能加 try/catch 控制降级逻辑。
路径类 data 属性命名必须全小写+连字符，否则 dataset 读不到
像 data-apiUrl、data-ImgPath、data-CDN-Host 这类命名，浏览器根本不会识别为 data- 属性，dataset 里查不到，getAttribute() 也取不到（因为 DOM 解析阶段就被忽略）。
合法命名规则（三要素缺一不可）：
- 前缀严格为
data- - 后续只能是小写字母、数字、连字符
- - 不能以数字开头（
data-1path❌），连字符后不能紧跟连字符（data-foo--bar❌）
推荐命名：
-
data-api-endpoint→dataset.apiEndpoint -
data-static-root→dataset.staticRoot -
data-upload-url→dataset.uploadUrl
注意：即使命名合法，dataset 返回的仍是字符串，比如 dataset.uploadUrl 是 "/upload"，不是 URL 实例，需要手动构造 new URL(...) 才能做路径解析或拼接。
修改路径值必须用 setAttribute()，dataset 赋值不更新 DOM
运行时想改某个元素的路径配置（比如切换 API 环境），别写 el.dataset.apiEndpoint = "https://staging.example.com"——这只会改 dataset 代理对象，DOM 属性节点没变，el.getAttribute('data-api-endpoint') 还是旧值，CSS 选择器 [data-api-endpoint] 也匹配不到新值，刷新后直接丢失。
真正生效的写法只有：
el.setAttribute('data-api-endpoint', 'https://staging.example.com');
// 或删除
el.removeAttribute('data-api-endpoint');
补充提醒：
- 如果元素是通过
innerHTML动态插入的，插入后需确保data-属性已存在，否则dataset映射不会自动建立（现代浏览器一般会补，但不可依赖） - 路径值若来自用户输入或第三方数据，务必校验合法性（比如是否为相对路径、是否含
javascript:协议等），防止后续拼接时引入 XSS 风险
data-* 不是状态容器，它只是个轻量元数据快照；路径变了，该触发的逻辑（比如重新 fetch）得你自己写，DOM 不会自动响应。
