html&javascript:如何存储引用html元素的数据

Question

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

我有一个在html页面中列出的用户列表.在这些用户中,我可以执行以下操作:从帐户中更改他们的"状态"或"删除"他们.

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

PS:我正在使用jQuery.

Answer 1

有jQuery的数据功能

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

Answer 2

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

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

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

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

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块,这些用户项具有与您要查询的元数据匹配的相关隐藏字段.