HTML data属性JSON数据存储方法-html教程-PHP中文网

data-*属性存json必须先用json.stringify()序列化为字符串，读取时用json.parse()解析；直接赋对象会转成"[object object]"导致解析失败，且dataset是只读快照，修改不写回html。

html data属性json数据存储方法

data-* 属性不能直接存 JSON 对象或数组，必须用 JSON.stringify() 序列化成字符串再写入，读取时再用 JSON.parse() 解析——否则得到的永远是 "[object Object]" 或 "1,2,3" 这类无意义字符串。

为什么 dataset.config = {a: 1} 会失效

因为 dataset 是只读映射，且所有赋值都会被强制转为字符串。执行 el.dataset.config = {a: 1} 实际存入的是 "[object Object]"，不是合法 JSON；后续 JSON.parse(el.dataset.config) 必然抛出 SyntaxError: Unexpected token o。

dataset 不是双向绑定，它只是 DOM 初始化时的一次性快照
写入必须走 el.setAttribute('data-config', JSON.stringify(obj))
读取时若不确定是否已设置，建议用 el.getAttribute('data-config') 而非 dataset.config，避免驼峰转换错位（如 data-user-preferences → dataset.userPreferences）
属性名含中划线时，dataset 自动转驼峰，但原始 HTML 中仍是 data-user-preferences，别指望 JS 里能用点号语法访问非法命名

存 JSON 前必须检查数据可序列化

JSON.stringify() 会静默丢弃 undefined、function、Symbol、Date、RegExp 等类型。存之前得确认原始数据是纯对象/数组结构。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

含 Date 字段？先转成 ISO 字符串：date.toISOString()
含 Map 或 Set？先用 Object.fromEntries(map) 或 Array.from(set) 转换
字段值可能是 undefined？提前过滤或替换为 null，否则会被整个键删掉
不要依赖 toString() 或手拼字符串——它们无法还原嵌套结构

读取时必须加 try/catch 和默认值

getAttribute() 可能返回 null，JSON.parse(null) 直接报错；空字符串、损坏 JSON 也会让解析失败。

安全读取写法：const config = JSON.parse(el.getAttribute('data-config') || '{}')

更健壮写法：

try {
  const raw = el.getAttribute('data-config');
  const config = raw ? JSON.parse(raw) : {};
} catch (e) {
  console.warn('Failed to parse data-config:', e);
  const config = {};
}