javascript - 向 html 元素追加/添加自定义数据(隐藏)？

Question

所以 html 元素可以有一些属性来说明该元素的一些信息。然而，这些属性对任何人都是可见的，如果存储的数据是敏感的，这可能会很糟糕。那么你可以使用 javascript/jquery 或其他东西将数据存储在 html 元素中/上吗？

就像(使用 jQuery)如果我有一个 #apple div 并想向其附加 secret 数据(红色)。我可以用这个逻辑做点什么吗？:

$("div#apple").secret = "red";
or 
$("div#apple").data = { "color": "red" };
alert("The color of an apple is " + $("div#apple").secret);

我猜测一种方法是创建一个 jQuery 函数来绑定(bind)到 html 元素，然后将数据绑定(bind)到该函数，但是有没有一种更简单/更好的方法来实现这样的功能？

另外，我知道 html 5 允许自定义属性，是否有任何版本的 html 可以在没有 javascript/jquery 的情况下允许/执行上述操作？

Answer 1

是的，jQuery's .data()就是你所需要的。它以键值方式存储数据。

你可以这样使用它:

$('.where').data('key', 'value');
$('.where').data('dog', {'name': 'fritz'});

然后您可以通过以下方式检索它:

$('.where').data('key'); // value
$('.where').data('cat'); // null, nothing exists with the cat key
$('.where').data('dog'); // object, {'name': 'fritz'}

它可以将所有数据存储在其内部对象 jQuery.cache 中。