data属性只能存字符串，非字符串值会被自动转为字符串；存结构化数据需JSON.stringify()，读取时用JSON.parse()并加try-catch；避免存敏感信息和大量数据，SSR中可用但须遵循最小化原则。
data属性能存哪些值？字符串是唯一安全选择
data- 属性只接受字符串，浏览器会把任何非字符串值（比如对象、数组、布尔值）自动转成字符串。例如 data-params="{"id":1}" 实际存储的是字面量双引号字符串，不是 JSON 对象；data-loading="true" 存的是字符串 "true"，不是布尔 true。
- 如果要存结构化数据，必须先
JSON.stringify()，取用时再JSON.parse()，否则直接读取会报SyntaxError - 避免在
data-中存敏感参数（如 token、用户 ID），它们会暴露在 DOM 中，可被任意脚本读取 - 参数值含空格、引号、尖括号时，务必用双引号包裹整个属性值，并对内部双引号做转义或改用单引号
怎么安全地把请求参数写进 data-id 和 data-query
常见场景是给按钮或列表项绑定请求参数，点击时发起请求。不要拼接 HTML 字符串手动注入，而是用 JS 动态设置：
const el = document.querySelector('#search-btn');
el.dataset.id = '123';
el.dataset.query = JSON.stringify({ q: '前端', page: 2, per_page: 10 });
这样生成的 DOM 是：
<button id="search-btn" data-id="123" data-query="{"q":"前端","page":2,"per_page":10}"></button>-
dataset属性会自动处理驼峰转换：写el.dataset.apiUrl→ DOM 中变成data-api-url - 不要用
setAttribute('data-query', obj)，它不会序列化，直接 toString() 会导致[object Object] - 若参数来自用户输入，务必先清理（如
encodeURIComponent()或白名单过滤），防止 XSS
读取时为什么 JSON.parse 报错？检查引号和转义
典型错误：JSON.parse(el.dataset.query) 报 Unexpected token " in JSON at position 0，是因为：
立即学习“前端免费学习笔记（深入）”；
- 后端模板（如 Django/Jinja）直接渲染了未转义的 JSON 到 HTML，导致双引号冲突
- 前端用
innerHTML插入含引号的 data 值，没做 HTML 实体转义 - 手动写了
data-query='{"q":"a"}'，但单引号内又用了未转义的双引号
正确做法：
- 服务端输出时用
json.dumps(..., separators=(',', ':'))+ HTML 转义（如"） - 或前端统一走
dataset设置，避免手写 HTML - 读取前加保护：
try { const params = JSON.parse(el.dataset.query || '{}'); } catch (e) { console.warn('Invalid data-query:', el.dataset.query); }
data属性不适合存大量参数或频繁更新的数据
dataset 是同步 API，每次读写都触发 DOM 访问，参数多（比如含 base64 图片）或高频操作（如滚动加载）时明显卡顿。
- 单次请求参数建议控制在 1KB 以内；超长用
Map或闭包缓存，只在元素上存一个 key（如data-cache-key="req_abc123"） - 不要拿
data-当状态管理用：比如data-loading="true"可以，但data-response='{"items":[...]}'就不该放 DOM 里 - SSR 场景下，data 属性是唯一能从服务端透出结构化数据到客户端的方式，但务必配合 CSP 和最小化原则
实际用的时候，最常被忽略的是：你以为存进去的是对象，其实只是字符串；你以为用户看不到，其实打开开发者工具就能全看见。
