<p>data-* 属性仅存储字符串，不解析JSON、不自动转类型；dataset返回值恒为字符串，需手动JSON.parse()或类型转换，连字符键名自动转驼峰，复杂数据应优先用ID查表而非存于DOM。</p>
data-* 属性不是配置容器，只是字符串载体；它不解析、不校验、不自动转类型，所有结构化数据必须手动处理。
data-* 的本质是字符串键值对，不是 JSON 解析器
浏览器把 data-config='{"size":"lg","mode":"dark"}' 当作纯文本存入 DOM，element.dataset.config 返回的仍是该字符串，不会自动 JSON.parse()。强行当作对象用会报 TypeError: Cannot read property 'size' of undefined。
- dataset 读取时自动将连字符转驼峰：
data-api-url→dataset.apiUrl，但值仍是字符串 - 含空格、引号、斜杠等特殊字符时，HTML 转义可能破坏 JSON 格式（如
'{"msg":"he"ll<o"}'） - 服务端渲染模板（如 Django、Jinja）中直接插变量时，必须确保 JSON 字符串已
escape，否则生成非法 HTML
button 和 option 的 value 属性不能替代 data-*
value 是表单语义属性，只参与提交流程，且强制为字符串。试图塞对象只会得到 "[object Object]"，和 data-* 完全无关。
-
<button value='{"x":1}'>→btn.value是字符串"{"x":1}"，不是对象 -
<option value='user-123'>比<option value='{"id":123,"name":"Alice"}'>更安全可靠 - 若需关联复杂数据，用
value做 ID，再在 JS 中查表：const users = { "user-123": { id: 123, name: "Alice" } }
React/Vue 中不要用 props 直传对象到原生元素
像 <div airport={airport}> 这种写法在 React 中会被忽略——原生 DOM 不识别非标准属性，event.target.airport 永远是 undefined。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须显式映射为
data-属性：<div data-airport-id={airport.id} data-airport-name={airport.name}> - 事件中读取：
const id = parseInt(event.target.dataset.airportId)（注意 dataset 键名自动小驼峰） - 避免在 dataset 中存大量字段；优先用 ID + 外部数据源查表，减少 DOM 体积和序列化开销
跨页面传递配置？别依赖 data-*，改用 URL 或 storage
data-* 只存在于当前页面 DOM 树，刷新即丢。想让目标页拿到配置，得走持久化路径。
- 短配置走 URL：
location.href = "page.html?theme=dark&lang=zh"，用new URLSearchParams(location.search)解析 - 长配置或敏感项用
sessionStorage：sessionStorage.setItem("config", JSON.stringify(obj))，目标页读取后立即removeItem - Cookie 不推荐：大小限制 4KB，每次请求自动携带，有性能与安全风险
真正容易被忽略的是 dataset 的类型陷阱——它永远返回字符串，哪怕你写的是 data-count="42"，读出来也是 "42"，不是数字。任何计算或比较前都得手动转换，否则 "42" === 42 是 false。
