使用jQuery为div属性赋值JS对象后如何保留对象而非转为字符串？

这个问题其实是DOM属性的本质导致的——所有DOM元素的属性值只能是字符串类型，所以当你直接把对象赋值给data-polygon属性时，JavaScript会自动调用对象的toString()方法，把它转成"[object Object]"，这就是你看到的结果。给你几个靠谱的解决方案：

方案1：用jQuery的data()方法（最推荐） #

jQuery的data()方法专门设计用来在DOM元素上存储任意类型的数据，它不会把数据存在DOM的data-*属性里（而是存在jQuery内部的缓存中），所以可以直接存对象，不需要转换：

// 先修正你的变量定义（原写法有误，会报错）
var temp = { name: "first" };
// 或者分步声明：var temp = {}; temp["name"] = "first";

// 给目标元素存储对象
$('#image01').data('polygon', temp);

// 获取对象（直接拿到原对象）
var retrievedObj = $('#image01').data('polygon');
console.log(retrievedObj.name); // 输出 "first"

这个方法的好处是不用处理序列化/反序列化，而且支持存储任何类型的数据（包括函数、复杂嵌套对象），不会有JSON的限制。

方案2：JSON序列化（适合需要DOM属性可见的场景） #

如果你确实需要把数据存在DOM的data-polygon属性里（比如要让HTML源码里能看到这个值，或者其他非jQuery代码要读取），可以用JSON把对象转成字符串存储，取的时候再转回来：

var temp = { name: "first" };

// 存储：把对象转成JSON字符串
$('#image01').attr('data-polygon', JSON.stringify(temp));

// 获取：把JSON字符串转回对象
var retrievedObj = JSON.parse($('#image01').attr('data-polygon'));
console.log(retrievedObj.name); // 输出 "first"

注意：如果你的对象里包含循环引用（比如对象引用自身），或者有函数、undefined这类JSON不支持的类型，JSON.stringify会报错或者丢失数据，这种情况就不适合用这个方案。

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