Question

我有一个元素，我用jQuery的.data（）方法存储一些数据：

$('#myElement').data('rot', '10');

如果我为元素提取outerHTML，将其保存在服务器上，关闭浏览器，然后返回并将outerHTML从服务器拉回到浏览器中，数据值消失了，尽管所有的内联样式和我分配给元素的属性仍然存在。从这里我假设.data（）方法的工作原理是让当前的JavaScript实例化将数据保存在一些本地内存中，该内存也有一个链接到该元素。因此，只要您不关闭JavaScript，即关闭浏览器，该方法就可以正常工作。如果关闭浏览器，数据就会消失。另一方面，内联样式和属性成为outerHTML的一部分，因此转到服务器并返回。我看到了吗？

由于

Answer 1

试试这段代码

$('#myElement').attr('data-rot', 10);

Answer 2

如果所有其他失败，请尝试使用纯JavaScript：

如果您想使用现有的原生JavaScript检索或更新数据属性，则可以使用 getAttribute 和 setAttribute 方法执行此操作，例如：

var myEl = document.getElementById('myElement');

    myEl.setAttribute('rot', '10');

var attributeRed = myEl.getAttribute('rot');

此方法适用于所有现代浏览器，但不是如何使用数据属性。

实现相同目标的第二种（新的和改进的）方法是访问元素的数据集属性：

var myEl = document.getElementById('myElement');

    myEl.dataset.rot = '10';

var attributeRed = myEl.dataset.rot;

此数据集属性 - 新HTML5 JavaScript API的一部分 - 将返回所有选定元素的数据属性的DOMStringMap对象。使用此方法时，您可以放弃数据前缀，而不是使用完整的属性名称，直接使用分配给它的名称来引用自定义数据。包含连字符的数据属性名称将被删除其连字符并转换为CamelCase。

（积分转到：http://html5doctor.com/html5-custom-data-attributes/）

但是，仍然建议使用本机getAttribute和setAttribute方法来实现跨浏览器兼容性。

jQuery .data（）方法没有按预期工作

2 个答案: