不能。data-star属性只能存储字符串，必须用JSON.stringify()序列化后再赋值，读取时需用JSON.parse()解析，且需处理单引号非法、转义错误及解析异常等问题。
data-star属性能直接存JSON对象吗？
不能。HTML自定义属性（data-*）只接受字符串值，浏览器会把任何非字符串类型自动转成字符串。如果你直接写 <div data-star="{"score": 4.5, "count": 12}">，它确实能渲染成功，但本质只是字符串——不是可操作的JSON对象。
真正要“存JSON”，其实是存一个合法JSON字符串，后续用 JSON.parse() 解析。关键在于：必须确保字符串本身是双引号转义正确、无非法字符、符合JSON语法。
怎么安全地设置data-star的JSON字符串？
手动拼接容易出错（比如单双引号混用、未转义嵌套引号）。推荐用 JSON.stringify() 生成：
const starData = { score: 4.5, count: 12, tags: ["recommended", "top"] };
element.dataset.star = JSON.stringify(starData);
这样生成的字符串是：{"score":4.5,"count":12,"tags":["recommended","top"]}，可直接被 JSON.parse() 安全还原。
注意几点：
-
dataset设置时会自动做HTML属性名转换（starData→data-star-data），但你用的是data-star，所以对应属性名是star，没错 - 不要用
element.setAttribute('data-star', ...)手动拼JSON字符串——容易漏转义 - 如果原始数据含函数、undefined、Date对象等，
JSON.stringify()会静默丢弃，需提前清洗
读取时为什么JSON.parse会报错？
常见错误是解析失败，典型报错：SyntaxError: Unexpected token ' in JSON at position 0。原因通常是：
服务器或模板里硬编码了单引号JSON，比如：data-star="{'score': 4.5}" —— 这不是合法JSON，JSON强制要求键和字符串值必须用双引号。
立即学习“前端免费学习笔记（深入）”；
正确写法（服务端/模板输出时）：
- 用
json_encode($data, JSON_UNESCAPED_UNICODE)（PHP） - 用
JSON.stringify(obj)输出到模板变量（JS模板） - 避免在HTML中手写JSON，尤其别用单引号或未转义的换行
读取代码要加 try/catch：
try {
const data = JSON.parse(element.dataset.star || '{}');
} catch (e) {
console.warn('Invalid JSON in data-star:', e);
// fallback to empty object
}
data-star存大JSON会影响性能吗？ 影响很小，但有边界：
DOM属性存储本身不触发重排重绘，但过长的字符串会增加内存占用和解析耗时。实测超过 10KB 的 data-star 字符串，在低端设备上 JSON.parse() 可能卡顿几十毫秒。
- 建议单个
data-star不超过 2KB - 如果需要存大量结构化数据（如商品SKU列表），改用
<script type="application/json">块更合适 - 频繁读写时，解析结果应缓存到 JS 变量，避免重复
JSON.parse()
