Javascript 是否向html元素追加/添加自定义数据（隐藏）？

因此html元素可以有一些属性，这些属性可以说明元素的一些情况。但是，如果存储的数据是敏感的，则任何人都可以看到这些属性，这可能是不好的。那么，您可以使用javascript/jquery或其他工具在html元素中/上存储数据吗

比如（使用jQuery），如果我有一个#apple div，并想在它后面附加一个秘密数据（红色）。我能用这个逻辑做点什么吗

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

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

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

是的，这是您需要的。它以键值方式存储数据

您可以这样使用它：

$('.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'}

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

$('.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

中。jQuery方法可用于在元素上存储任意数据。如果没有与元素本身上使用的名称匹配的

data-*

属性，jQuery将在内部存储数据，并且它不应该通过任何DOM检查器可见

这是一个例子

然而，您应该意识到这样一个事实：无论您多么努力地隐藏客户端，客户端的任何内容都将始终对用户可见。如果您有“机密”数据，最安全的位置是在服务器上。

使用jQuery的功能，例如

$("#apple").data("color", "red");

var color = $("#apple").data("color"); // "red"

---

我认为第二种方法非常安全。 但请记住，最后该值将存储在浏览器内存中。我相信一定有办法嗅到这一点。

---

记住一件事，如果你想要一些东西是安全的，不要放在网上。

实际上，你可以在HTML标签中使用你自己的属性，比如。文档不会验证，但浏览器只会忽略他们无法识别的属性；从早期开始，这就是HTML的实践

但是，为了避免与标准属性、特定于浏览器的属性以及它们的未来扩展发生冲突，最好使用HTML5约定的“数据-*属性”，例如

正如您所说的，您正在寻找“没有javascript/jquery”的东西，我想这将用于像专门的索引机器人这样的东西——至少一些用于站点范围搜索系统的机器人使用额外的属性。在这种情况下，请检查robot的解析例程是否接受包含连字符“-”的属性名（一些简单的解析器可能无法做到这一点）

---

当然，任何使用视图源的人都可以使用这些数据。如果数据是敏感的，它不应该出现在HTML源代码中。在某些情况下，您可以考虑将标识号或字符串作为安全地存储在服务器上的信息的索引。

我希望我在查询问题之前更努力地搜索这一点……）但是，有没有一种方法是只构建在html中的呢？没有，使用纯html你无法做到这一点。请注意，甚至jQuery

.data

都是安全的，因为您发送的敏感内容将以未加密的方式存储在客户端。您的意思是要将机密数据添加到客户端开源代码（如javascript）中？