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

html 的 data-* 属性只能存储字符串，存数组必须用 json.stringify() 序列化、json.parse() 反序列化，并配合 try/catch 和空值判断；直接赋值数组会触发 tostring() 导致结构丢失，dataset 读写有代理陷阱，应优先使用 setattribute/getattribute。

html data属性数组存储方法

HTML 的 data-* 属性不能直接存数组，必须序列化为字符串；最安全可靠的方式是用 JSON.stringify() 写入、JSON.parse() 读取，并始终配合 try/catch 和空值判断。

data-* 属性只认字符串，数组会自动 toString() 丢结构

你写 el.dataset.items = [1, 2, 3]，浏览器实际存的是 "1,2,3"，不是 JSON 数组。嵌套对象、null、布尔值全被扁平化或静默丢弃。

常见错误现象：JSON.parse(el.dataset.config) 报错 SyntaxError: Unexpected token o，因为实际值是 "[object Object]"
toString()、join()、手拼字符串都不可靠——它们无法还原原始类型和嵌套结构
只有 JSON.stringify() 能在 JSON 支持范围内保结构（不支持 undefined、Date、function、RegExp）
写入前建议校验数据：if (typeof data === 'object' && data !== null) { ... }

dataset.xxx 读写有陷阱，优先用 setAttribute + getAttribute

dataset 是只读代理，赋值如 el.dataset.items = JSON.stringify([...]) 不会真正更新 DOM 属性节点，刷新后就丢失；且属性名不规范时（含数字、大写、下划线）会静默失败。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

正确写入方式：el.setAttribute('data-items', JSON.stringify([1, 2, 3]))
更稳妥读取方式：const raw = el.getAttribute('data-items');，再 raw ? JSON.parse(raw) : []
避免混用：el.dataset.items = 'xxx' 后再 el.setAttribute('data-items', 'yyy')，会导致 dataset.items 和 getAttribute 返回不同值
含数字开头的属性（如 data-2024-list）只能用 getAttribute('data-2024-list')，dataset["2024List"] 才能访问，dataset.2024List 是语法错误

JSON 存取必须加 try/catch 和默认值兜底

用户输入、服务端注入或手动编辑 HTML 都可能导致 data-* 值不是合法 JSON，JSON.parse() 会直接抛错中断逻辑。

不要裸调 JSON.parse(el.getAttribute('data-config'))

标准写法：

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