如何为某些 HTML 标签存储任意数据

IT技术 javascript html
2021-01-29 13:37:37

我正在制作一个页面，其中有一些由 javascript 提供的交互。举个例子：发送 AJAX 请求以获取文章内容然后在 div 中显示该数据的链接。显然在这个例子中，我需要每个链接来存储额外的信息：文章的 id。我一直在处理它的方式是将该信息放在 href 链接中：

<a class="article" href="#5">

然后我使用 jQuery 查找 a.article 元素并附加适当的事件处理程序。（不要太纠结这里的可用性或语义，这只是一个例子）

无论如何，这个方法是有效的，但它有点味道，而且根本无法扩展（如果点击函数有多个参数会发生什么？如果其中一些参数是可选的怎么办？）

显而易见的答案是在元素上使用属性。我的意思是，这就是他们的目的，对吧？（的种类）。

<a articleid="5" href="link/for/non-js-users.html">

在我最近的问题中，我问这种方法是否有效，结果证明我没有定义自己的 DTD（我没有），然后不，它无效或不可靠。一个常见的react是将数据放入class属性中（尽管这可能是因为我选择的例子不当），但对我来说，这闻起来更糟。是的，它在技术上是有效的，但它不是一个很好的解决方案。

我过去使用的另一种方法是实际生成一些 JS 并将其插入到页面的<script>标签中，创建一个与对象关联的结构。

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

但这对于维护来说可能是一个真正的痛苦，并且通常非常混乱。

那么，要解决这个问题，您如何为 HTML 标签存储任意条信息？

6个回答

您使用的是哪个版本的 HTML？

在 HTML 5 中，自定义属性以 data- 为前缀是完全有效的，例如

<div data-internalid="1337"></div>

在 XHTML 中，这不是真正有效的。如果您在 XHTML 1.1 模式下，浏览器可能会抱怨它，但在 1.0 模式下，大多数浏览器只会默默地忽略它。

如果我是你，我会遵循基于脚本的方法。你可以让它在服务器端自动生成，这样维护起来就不麻烦了。

2021-03-15 13:37:37
提醒：为了通过jquery检索数据1337，一定要去掉变量名中的'data'。例如，使用： $(this).data('internalid'); 而不是：$(this).data('data-internalid');
2021-03-18 13:37:37
@Tchalvak：没错，但这一点仍然适用于大多数浏览器。
2021-03-31 13:37:37
其他人声称没有理由等待支持，因为这导致的唯一问题是验证失败，并且它不会破坏 IE。在此处查看 TJ Crowler 的回答：stackoverflow.com/questions/1923278/...
2021-03-31 13:37:37
如果您确实使用了 data-xxx 属性并且想要检索它们，则可以简单地使用“domElement.getAttribute('data-whatever')”而无需任何第三方框架。
2021-04-08 13:37:37

如果您已经在使用 jQuery，那么您应该利用“data”方法，这是使用 jQuery 在 dom 元素上存储任意数据的推荐方法。

存储东西：

$('#myElId').data('nameYourData', { foo: 'bar' });

检索数据：

var myData = $('#myElId').data('nameYourData');

这就是它的全部内容，但请查看jQuery 文档以获取更多信息/示例。

换一种方式，我个人不会使用它，但它有效（确保您的 JSON 有效，因为 eval() 是危险的）。

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);
+1 用于横向思维。我同意我可能不想使用这种方法，但这是一个模糊可行的选择！
2021-03-23 13:37:37
@nickf你可以摆脱eval使用JSON.parse代替jsfiddle.net/EAXmY
2021-03-31 13:37:37

任意属性是无效的，但在现代浏览器中是完全可靠的。如果您通过 javascript 设置属性，那么您也不必担心验证。

另一种方法是在 javascript 中设置属性。jQuery 有一个很好的实用方法就是为了这个目的，或者你可以推出自己的方法。

为什么不使用data-属性呢？
2021-03-25 13:37:37

一个几乎适用于所有可能的浏览器的 hack 是使用这样的开放类： <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

这对于纯粹主义者来说并不是那么优雅，但它得到了普遍支持、符合标准并且非常容易操作。这似乎真的是最好的方法。如果serialize，修改，复制你的标签，否则做几乎任何事情，data会保持连接，拷贝等。

唯一的问题是你不能以这种方式存储不可序列化的对象，如果你把一些非常大的东西放在那里，可能会有限制。

第二种方法是使用假属性，例如：<a articleid='5' href="link/for/non-js-users.html">

这更优雅，但违反了标准，我不是 100% 确定支持。很多浏览器是完全支持的，我觉得IE6支持JS访问但是不支持CSS selectors（这里不重要），可能有的浏览器会完全糊涂，你需要检查一下。

做诸如序列化和反序列化之类的有趣事情会更加危险。

使用ids纯JS散列大多有效，除非您尝试复制标签。如果你有tag <a href="..." id="link0">，通过标准JS方法复制它，然后尝试修改data附加到一个副本，另一个副本将被修改。

如果你不复制tags，或者使用只读数据，这不是问题。如果您复制tags 并且修改了它们，则需要手动处理。

在课堂上存储 valse 很棒
2021-03-20 13:37:37
其它你可能感兴趣的问题
上一篇如何向复制的网页文本添加额外信息 下一篇浏览器如何暂停/更改JavaScript时选项卡或窗口未激活？