html & javascript：如何存储引用 html 元素的数据答案

【问题标题】：html & javascript: How to store data referring to html elementshtml & javascript：如何存储引用 html 元素的数据
【发布时间】：2009-06-01 11:35:34
【问题描述】：

我正在开发一个使用 ajax 与服务器通信的 Web 应用程序。我的具体情况如下：

我在 html 页面中有一个用户列表。对于这些用户中的每一个，我可以执行以下操作：更改他们的“状态”或从帐户中“删除”他们。

在页面中存储以下信息的最佳做法是：

用户 ID
用户的当前状态

P.S.：我正在使用 jQuery。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

也许使用自定义属性，所以对于用户的列表元素，为变量添加属性：

<li uid="theuserid" ustatus="thestatus"></li>

然后可以使用 attr 函数获取值：

$("li").attr("uid")

还有

$("li").attr("ustatus")

注意：显然需要更改选择器

请注意，对于自定义属性的使用存在不同的意见 - 但是，这对于每个主流浏览器都应该没问题。这也是我能想到的最简单的解决方案。它不需要跳转到同级元素来获取数据或查找附近的元素，这都会增加少量的处理开销 - 我尝试尽量减少在执行此类操作时添加到 DOM 的额外膨胀量。

【讨论】：

是的，但归根结底，哪个更可取 - 可行且相当迅速的东西，还是合规的东西？
@activa 和@Kazar 为什么没有符合和可取的元数据插件？
HTML 5 将允许以 data- 开头的任意属性。所以你可以做数据状态并成为有效的 HTML 5。

【解决方案2】：

关于什么是最好的使用存在很多争论。您可以通过多种方式存储数据，并且它们都让某人感到高兴 - 如果您使用 XHTML，自定义属性当然不会验证，并且使用类来存储一两位数据充其量是笨拙的，而且只会变得更糟你想知道的事情的数量。就个人而言，我不仅不是 XHTML 的忠实粉丝，而且我也不是一个验证纳粹，所以我建议使用自定义属性。

但是，有一个选项可以使自定义属性与标准相协调：data- 属性。正如 John Resig（jQuery 的作者）writes about in his blog，这是 HTML5 中引入的一个新属性，允许您使用 data- 前缀指定 custom data attributes。所以一个完全有效的元素可能看起来像这样：

<ul>
    <li data-userid='5' data-status='active'>Paolo Bergantino</li>
</ul>

这样做的好处是，当您仍在使用自定义属性时未来与特定项目相关的数据。

一些进一步的阅读是Attributes > Classes: Custom DOM Attributes for Fun and Profit.

【讨论】：

【解决方案3】：

有jQuery的数据功能

$('li').data('userid',uid); // sets the value of userid
uid = $('li').data('userid'); // retrieves the value of userid

官方文档：http://docs.jquery.com/Data

【讨论】：

虽然我同意 data 函数是在这些 dom 元素中存储数据的好方法，但仍然存在首先从服务器获取数据到 jquery 的问题。
这也是我关心的问题......我仍然需要一种方法来“识别”dom 元素，以便我可以附加数据。另外，我认为我需要保留一个单独的 javascript 结构来存储所有初始值。
好吧，我没有意识到你的问题的范围。看看 TM 的回答。
使用 jquery 的元数据插件。请参阅我的答案以获取示例（并对其进行投票！）。

【解决方案4】：

jQuery 数据

如果您想针对 jQuery 对象存储自定义数据，请使用 data function。

$('#myField').data('name', 'Jack');
var name = $('#myField').data('name');

HTML5 数据-* 属性

您还可以使用 HTML5 data-* 属性，尽管用于访问这些属性的 API 仅被不同的浏览器部分支持。 Here's some more information about that.

<div data-userid="123" class="user-row">

以编程方式：

$('#myElement').attr('data-fruit', 'apple');
// or
document.getElementById('myElement').dataset.fruit = 'apple';

隐藏字段

如果您想以旧的浏览器兼容方式执行操作并将元数据直接填充到您的 html 中，您可以使用隐藏字段。这有点粗略，但很容易做到。

<input type="hidden" name="UserID" value="[userid]" />

您可以轻松地使用jQuery selectors 来查询您的列表并查找包含用户项的 html 块，这些用户项具有与您查询的元数据相匹配的相关隐藏字段。

【讨论】：

我同意...如果在 JavaScript 领域，请使用 jQuery 数据函数。如果在纯 HTML 领域，此方法比“data-”前缀或自定义 HTML 属性更好，因为它们不完全支持跨浏览器。另外，它们很臭。隐藏输入标签是一个糟糕的解决方案，但它可能是最好的解决方案——而且仍然兼容 XHTML。

【解决方案5】：

在这种情况下，我认为自定义属性可能是矫枉过正。您可以将用户 ID 存储在 id 属性中，因为列表中只有一个用户实例，对吧？此外，用户的状态可以存储在 class 属性中。通过这种方式，可以在 CSS 中为每个用户指定不同的样式，例如绿色表示活动帐户，黄色表示未激活帐户，红色表示暂停帐户。

但是，与使用自定义属性相比，获取状态的代码会稍微复杂一些（但前提是您还想拥有多个类）。更积极的一点是，HTML 将使用这种方法进行验证，而不会使用自定义属性。

<ul id="userList">
    <li id="uid123" class="active">UserName X</li>
    <li id="uid456" class="suspended">Mr. Troll</li>
</ul>

/**
 * Simple function for searching (strict) for a value in an array
 * @param array arr The array to look in
 * @param mixed val The value to look for in arr. Note that the value is looked for using strict comparison
 * @return boolean true if val is found in arr, else false
 */
function searchArray(arr, val) {
    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i] === val) {
            return true;
        }
    }
    return false;
}

/**
 * Gets a known status from a string of class names. Each class name should be separated
 * by a space.
 * @param string classNames The string to check for a known status
 * @return string|false The status if found in classNames, else false
 */
function getStatus(classNames) {
    // The different statuses a user can have. Change this into your own!
    var statuses = ['active', 'suspended', 'inactive'], 
        nameArr = classNames.split(" ");
    for(var i = 0, nameLen = nameArr.length; i < nameLen; i++) {
        // If we find a valid status among the class names, return it
        if(searchArray(statuses, nameArr[i])) {
            return nameArr[i];
        }
    }
    return false; // We didn't find any known status in classNames
}

var id = $("li").attr("id"); // Fetches the id for the first user
var status = getStatus($("li").attr("class")); // Fetches the status of the first user

【讨论】：

为什么我被否决了？该代码有效，并且我提供了一个函数，用于从类属性中提取状态，即使存在其他类...如果不需要，则只需删除 getStatus 函数。
您无法在客户端检查状态的有效性。您可以使用 CSS 提供有关正确状态的视觉提示，因为您已经使用了类属性。但是你的javascript基本没用。
这里给出的任何解决方案都可以这样说。状态是否存储在类属性或自定义属性中并不重要。它仍然必须在服务器端进行验证。我的意思是它将从一串类名中提取“已知”状态。我不是以英语为母语的人，所以我想这是我帖子中的一个不幸的措辞。

【解决方案6】：

jquery 的metadata 插件就是你的答案。

<html >
<head>
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.metadata.js"></script>
</head>
<body>
<ul>
<li type="text" class="{UID:'1',status:'alive'}">Adam</li>
<li type="text" class="{UID:'2',status:'alive'}">Bob</li>
<li type="text" class="{UID:'3',status:'alive'}">Carol</li>
</ul>
<script>
$('li').each(function(){window.console.log($(this).metadata().UID)});
</script>
</body>
</html>

【讨论】：

【解决方案7】：

根据您要存储的数据类型以及您在页面中存储的一般信息量，有多种方法可以做到这一点。最好设计一个一致的方案，这样您就可以编写一个简单的库调用来完成这项工作。例如，

您可以将数据存储在特定元素的类中。这可能需要额外的包装元素，以便能够提供额外的类来驱动您的 CSS。这也限制了可存储的内容格式。用户 ID 很可能适合类属性。

您可以将数据存储在 Javascript 激活链接的未使用的 href 中。这具有将状态栏中的数据显示为翻转时 URL 的一部分的附加功能。例如，您可以在 href 中存储 '#userid' 甚至只是 'userid'。

您可以将数据存储在其他元素中。例如，您可以有一个嵌套的 div，其中包含一个指示存储的类，这也会触发 CSS 将元素从显示中取出。这是您可以在页面中安排的最普遍和最广泛的支持。

除了嵌套的 div，您还可以使用 type="hidden" 的嵌套输入标签。这是一种更加预期/传统的方式，并且不需要 CSS 将它们从显示中取出。您可以使用 id 属性来识别这些输入，也可以使用页面上的位置。例如，将它们放在用户单击的链接中，然后在 onclick 处理程序中搜索当前链接。

【讨论】：

【解决方案8】：

为了回答“如何首先将其放入文档”的问题，我建议类似这样的布局：

<ul id="users">
    <li id="someUserId" class="someStatus">Some Username</li>
    <li id="someOtherUserId" class="someOtherStatus">Some Username</li>
</ul>

这使您可以轻松选择有关用户的大量信息：

$('#users > li') // all user elements
$('.someStatus') // all users of a particular status

然后在您的事件处理程序中也很容易获得当前状态：

$(this).attr('class') //get current status once you have a user element selected.

另一种选择是将 javascript 转储到页面，并让它使用 jquery data 功能在页面加载后立即存储数据。不过，您仍然需要元素上的 id 才能找到正确的。

【讨论】：