原生JavaScript如何将完整对象存入div的dataset并正确读取

HTML的data-*自定义属性仅支持存储字符串类型值，你直接将对象与字符串拼接时，JS会自动调用对象的默认toString()方法，最终得到的就是[object Object]字符串，对象实际内容完全没有被存入属性。
另外你的dataset读取写法也有错误：data-config属性对应的dataset访问键是config，不需要额外加data-前缀。

不需要拆分对象属性，存值时将对象序列化为JSON字符串，读取时反序列化为JS对象即可。

修正后的存值代码 #

<div id="test"></div>

<script>
  var config = {
    "user-id": "test001",
    "approach": true,
    "product-id": "testproduct1"
  }

  var x = document.createElement('iframe');
  x.setAttribute("id", "wrapper");
  // 序列化对象为JSON，转义双引号避免HTML属性提前闭合
  const configJson = JSON.stringify(config).replaceAll('"', '&quot;');
  x.setAttribute("srcdoc", `<script src="test.js"><\/script><div data-config="${configJson}" id="myid"></div>`);
  document.getElementById('test').appendChild(x);
</script>

修正后的读取代码 #

// 从dataset读取JSON字符串后反序列化为对象
const info = JSON.parse(document.querySelector('#myid').dataset.config);
console.log(info['user-id'], info.approach, info['product-id']); // 可正常访问所有属性

如果用getAttribute方式读取，逻辑完全一致：

const configStr = document.getElementById('myid').getAttribute("data-config");
const config = JSON.parse(configStr);

• 所有DOM属性存储的值本质都是字符串，数字、布尔、对象、数组等非字符串类型存入时都会触发隐式类型转换，复杂类型必须手动做序列化/反序列化处理
• data-*属性在dataset中访问时，直接取data-后的部分即可，带横杠的属性名会自动转为驼峰格式，例如data-user-id对应dataset.userId
• 序列化后的JSON字符串如果直接拼接进HTML属性，必须将内部的双引号替换为"实体，否则会截断属性值，导致HTML结构解析错误

内容的提问来源于stack exchange，提问作者Ewald Bos