在 html 中存储数据比隐藏字段更好的方法答案

【问题标题】：Better approach than hidden field to store data in html在 html 中存储数据比隐藏字段更好的方法
【发布时间】：2013-08-03 12:20:27
【问题描述】：

我想知道是否有更好的方法将数据存储在 html 内容中。
目前，我使用隐藏字段将一些值存储在我的 html 文件中。这些值由后面的代码生成。

HTML：

<input type="hidden" id="hid1" value="generatedValue1" />
<input type="hidden" id="hid2" value="generatedValue2" />

因此我使用 jquery 在客户端获取这些值，以便将它们传递给 ajax 请求。

JQuery

$.ajax({
  data:{
     var1 : $('#hid1').val(),
     var2 : $('#hid2').val()
  }
);

那么这是执行此操作的正确方法，还是存在实现相同结果的更平滑的解决方案？由于我不需要将这些值发布在提交页面上，input hidden 可能很糟糕。

【问题讨论】：

您需要将值通过form 传输到其他页面吗？
不，我指出了这一点，这就是我认为我误导的原因。
您说您不需要发布的值，但您的 JQuery 在$.ajax中使用它们
您可以将值从代码隐藏传递到 JSON 格式的 js 变量。
@James 确实，我在该页面上有很多可用的操作，一个标准的表单提交和一些允许用户更改页面的一些数据的 ajax 请求。表单提交时不请求这些值，仅与作为 get btw 的 ajax 请求一起使用。

标签： javascript jquery html ajax

【解决方案1】：

如果您不需要表单中的那些，那么只需在您的 JavaScript 中将它们设为变量即可。要输出它们，请通过JavaScriptSerializer class 对其进行编码：

<%
    // Presumably somewhere in your C# code...
    JavaScriptSerializer serializer = new JavaScriptSerializer();
%>
<script>
var hid1 = <%= serializer.Serialize(valueForHid1) %>;
var hid2 = <%= serializer.Serialize(valueForHid2) %>;
</script>

（请参阅下面有关全局变量的注释。）

稍后使用它们：

$.ajax({
  data:{
     var1 : hid1,
     var2 : hid2
  }
);

全局变量：如图所示，hid1 和 hid2 最终成为全局变量（在大多数浏览器上，当您使用隐藏字段时它们也会这样做）。我建议不要使用全局变量，而是将所有内容都包装在作用域函数中：

(function() {
    var hid1 = <%= serializer.Serialize(valueForHid1) %>;
    var hid2 = <%= serializer.Serialize(valueForHid2) %>;

    // ....    

    $.ajax({
      data:{
         var1 : hid1,
         var2 : hid2
      }
    );
})();

如果出于某种原因您必须使用全局变量，请只使用一个：

var myOneGlobal = {
    hid1: <%= serializer.Serialize(valueForHid1) %>,
    hid2: <%= serializer.Serialize(valueForHid2) %>
};

稍后使用：

$.ajax({
  data:{
     var1 : myOneGlobal.hid1,
     var2 : myOneGlobal.hid2
   }
);

您可以使用序列化器将整个对象图输出到一个变量（可能是myOneGlobal）：

<script>
var myOneGlobal = <%= serializer.Serialize(objectWithData) %>;
</script>

【讨论】：

虽然你应该得到一个公平的+1作为答案，我认为主要想法是错误的 - 手动添加变量？如果它们很多怎么办？或者它们的数量是动态的？我认为 JSON 是这里更好的选择。
@KamilT：上述内容当然可以变得更加动态。不过 JSON 不是必需的，因为我们处理的是 JavaScript，而不是文本数据。
由于这些值是由服务器生成的而不是静态的，我仍然需要在 html 中进行某种存储才能从客户端访问它们。
我对 javascript 和 jquery 有点陌生，我想我需要阅读更多关于 global 的信息。泰。
@nubinub：不，您可以为此使用 JavaScript 变量。我添加了一条说明，说明如何使用服务器端信息并通过 JavaScriptSerializer 类将其作为变量输出到页面。

【解决方案2】：

您应该使用 HTML5 数据属性。

即<a href="#" data-YOURKEY="YOUR-VALUE">My Link</a>

您可以轻松访问此属性，即使用 jQuery

$(".mylink").attr("data-YOURKEY");

John Resig 解释得很好： http://ejohn.org/blog/html-5-data-attributes/

请同时阅读 HTML5-Doctor 的规范 http://html5doctor.com/html5-custom-data-attributes/

..如果你想更深入一点： http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-属性

【讨论】：

我认为 OP 不想要页面上的元素，这就是他现在使用隐藏输入的原因。
Ty 的文档，真的很有趣。

【解决方案3】：

您可以使用新的 HTML5“数据”属性。 (http://html5doctor.com/html5-custom-data-attributes/)

你的代码隐藏部分会做这样的事情：

<ul data-listname="{put name here}">
    <li data-key="{put key here}>
        Item1 
    </li>
</ul>

然后在你的 jQuery 中你可以这样做：

var firstId = $('li').first().data('id');
var list = $('ul').data('listname');

确保在data- 之后只使用小写字母我发现，否则它将无法正常工作。你也可以这样设置数据：

$('#something').data('smthgnelse', 'Hi there');

【讨论】：

【解决方案4】：

我通常做的是将值作为 data- 属性添加到 html 表单：

<form data-field1="generatedValue1" data-field2="generatedValue2">
...
</form>

然后，用 jQuery 检索它们：

... 
$form = $( my_selector_to_take_the_form );

data:{
     var1 : $('form').attr('data-field1'),
     var2 : $('form').attr('data-field1')
  }

有了这个，你不会发布任何隐藏字段

【讨论】：