标签可安全使用data-*属性携带静态业务上下文，须全小写连字符命名、用dataset读取、setattribute写入，值恒为字符串，禁存敏感信息。
段落标签（<p></p>）本身是语义化的内容容器，不承载交互逻辑，但它完全可以结合 data-* 自定义属性来携带轻量、静态的业务上下文信息——比如文章作者 ID、发布时间戳、所属分类、审核状态等。关键不是“能不能用”，而是“怎么用才安全、规范、可维护”。
命名必须全小写加连字符
浏览器只识别严格符合规范的 data-* 属性。写错命名，JS 就读不到，DevTools 里也看不到。
- ✅ 正确：
<p data-article-id="1024" data-published-year="2026">…</p> - ❌ 错误：
data-articleId、data_article_id、data-PublishedYear—— 这些全被忽略，dataset.articleId永远是undefined - 数字开头的属性（如
data-2024-report）在 JS 中需用方括号访问：el.dataset["2024Report"]
读取要用 dataset，写入必须 setAttribute
dataset 是只读代理，它提供语义化访问（自动转驼峰），但不能直接赋值来更新 DOM 属性。
- 读取推荐：
const id = pEl.dataset.articleId; // "1024"（字符串） - 写入必须：
pEl.setAttribute("data-is-reviewed", "true"); - 别混用：
pEl.dataset.isReviewed = "false"不会同步到 HTML，后续getAttribute("data-is-reviewed")仍返回旧值 - 删除用：
pEl.removeAttribute("data-published-year")，而不是delete pEl.dataset.publishedYear
值永远是字符串，复杂数据要手动处理
哪怕你写的是 data-count="42" 或 data-active="true"，JS 读出来都是字符串，不能直接当数字或布尔用。
- 转数字：
Number(pEl.dataset.count)或+pEl.dataset.count - 判布尔：
pEl.dataset.isActive === "true"，不要用Boolean("false")（结果是true） - 存对象/数组：先
JSON.stringify({theme: "dark"})，再setAttribute("data-config", ...)；读取时用JSON.parse(pEl.getAttribute("data-config"))，并加try/catch
适合存什么，不适合存什么
<p></p> 标签加 data-* 是为 JS 提供上下文，不是前端数据库。
- ✅ 合适：文章 ID、作者名、分类 code、状态标识（
"draft"/"published"）、埋点追踪 ID - ❌ 不合适：用户 token、手机号、实时购物车数量、频繁变化的开关状态（如
isHovering） - ⚠️ 注意：所有
data-*都明文暴露在源码和 DevTools 中，敏感信息绝不可放 - 性能提示：单个值建议控制在几 KB 内；超长 JSON 优先考虑 JS 变量或
Map缓存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
