data-属性只能存字符串，存数组需JSON.stringify()序列化，读取时用JSON.parse()反序列化并加空值与错误处理；命名须HTML连字符、JS驼峰，数字开头key被忽略。
data- 属性本身不能直接存数组，它只接受字符串。想存数组，必须先用 JSON.stringify() 转成字符串；读取时再用 JSON.parse() 还原，并加空值和错误处理。
为什么直接赋值数组会失败
浏览器对 dataset 的所有写入都强制转为字符串——哪怕你写 el.dataset.items = [1, 2, 3]，实际存进去的是 "1,2,3"（调用 toString() 的结果），不是 JSON 格式。常见错误现象包括：
- 读出来是
"[object Object]"或"1,2,3"，JSON.parse()直接报SyntaxError: Unexpected token o - 嵌套对象、
null、布尔值能存但类型丢失，undefined和函数会被静默丢弃
正确写法：存前序列化 + 读时反序列化
必须手动走 JSON 流程，且要覆盖边界情况：
- 写入：
el.dataset.items = JSON.stringify([1, "a", { x: 2 }]) - 读取：
const items = JSON.parse(el.dataset.items || "[]") - 更安全的读取（推荐）：
try { const raw = el.dataset.items; const items = raw ? JSON.parse(raw) : []; } catch (e) { console.warn("data-items parse failed", e); const items = []; }
容易被忽略的命名与兼容性细节
属性名写法和 JS 访问方式不一致，错一个就取不到值：
立即学习“前端免费学习笔记（深入）”；
- HTML 中必须写连字符命名：
data-user-items，不能写dataUserItems或data_user_items - JS 中必须用驼峰：
el.dataset.userItems，不是el.dataset["user-items"]或el.dataset.user-items（语法错误） - 纯数字开头的 key（如
data-123items）会被浏览器完全忽略，不报错也不进 dataset - 如果值来自服务端渲染或模板引擎，注意 URL 编码问题：像
%22这类编码需先用decodeURIComponent()解码，再JSON.parse()
真正麻烦的不是怎么存，而是每次读都要自己判空、捕获异常、处理非法 JSON——这些逻辑很容易漏，一漏就让整个功能静默失败。
