html＆javascript：如何存储引用html元素的数据

Question

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

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

在页面中存储有关以下内容的信息的良好做法是什么：

用户ID
用户的当前状态

PS：我正在使用jQuery。

Answer 1

有jQuery的数据功能

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

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

Answer 2

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

但是，有一个选项可以将自定义属性与标准协调： data-属性。 正如John Resig（jQuery的作者）在他的博客中所写，这是HTML5中引入的一个新属性，允许您使用data-前缀指定自定义数据属性。 所以一个完全有效的元素可能如下所示：

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

这有一个好处，即当你仍在使用自定义属性时，如果你使用XHTML 可能会很糟糕，你的代码将会很好地老化，因为这是我们将来存储与特定项目相关的数据的方式。

进一步阅读的是Attributes> Classes：Fun and Profit的自定义DOM属性。

Answer 3

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

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

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

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

和

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

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

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

Answer 4

jQuery数据

如果要针对jQuery对象存储自定义数据，请使用数据函数。

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

HTML5数据 - *属性

您也可以使用HTML5 data-*属性，但访问这些属性的API仅受不同浏览器的部分支持。 这里有一些关于它的更多信息。

<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选择器查询列表并查找包含用户项的html块，这些用户项具有与您要查询的元数据匹配的相关隐藏字段。

Answer 5

在这种情况下，我认为自定义属性可能有点过分。 您可以将user-id存储在id -attribute中，因为列表中只有一个用户实例，对吧？ 此外，用户的状态可以存储在类 -attribute中。 通过这种方式，每个用户可以在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

Answer 6

jquery的元数据插件就是你的答案。

<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>

Answer 7

有多种方法可以实现，具体取决于您存储的数据类型以及您在页面中存储的信息量。 最好设计一个一致的方案，这样你就可以编写一个简单的库调用来完成工作。 例如，

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

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

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

您也可以使用type =“hidden”的嵌套输入标记，而不是嵌套的div。 这是更期望/传统的，并且不需要CSS将它们从显示器中取出。 您可以使用id属性来标识这些输入，也可以使用页面上的位置。 例如，将它们放在用户单击的链接中，然后只在onclick处理程序中的当前链接内搜索。

Answer 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才能找到合适的ID。

html＆javascript：如何存储引用html元素的数据

问题描述

8 个解决方案

解决方案1
17 2009-06-01 11:50:08

解决方案2
9 2009-06-03 05:00:39

解决方案3
5 2009-06-01 11:41:08

解决方案4
5 2009-06-01 11:46:20

解决方案5
2 2009-06-01 12:29:53

解决方案6
2 2009-06-03 04:32:31

解决方案7
1

解决方案8
1 2009-06-01 12:40:01

html＆javascript：如何存储引用html元素的数据

问题描述

8 个解决方案

解决方案1 17 2009-06-01 11:50:08

解决方案2 9 2009-06-03 05:00:39

解决方案3 5 2009-06-01 11:41:08

解决方案4 5 2009-06-01 11:46:20

解决方案5 2 2009-06-01 12:29:53

解决方案6 2 2009-06-03 04:32:31

解决方案7 1

解决方案8 1 2009-06-01 12:40:01

解决方案1
17 2009-06-01 11:50:08

解决方案2
9 2009-06-03 05:00:39

解决方案3
5 2009-06-01 11:41:08

解决方案4
5 2009-06-01 11:46:20

解决方案5
2 2009-06-01 12:29:53

解决方案6
2 2009-06-03 04:32:31

解决方案7
1

解决方案8
1 2009-06-01 12:40:01