Question

我想将某些内容的值存储在我的网页上供以后使用一些javascript函数。我想在我所拥有的地方做这样的事情一个ID为CategoryID的div，然后将其作为HTML放入其中。

   <div id="CategoryID"></div>

   $('#categories > li > a').click(function (e) {
      e.preventDefault();
      $('#CategoryID').html = $(this).attr('data-value')
      refreshGrid('Reference');
   });

然后在内部函数如refreshGrid（以及其他一些函数）中，我可以得到这样的值：

   var categoryID = $('#CategoryID').val();

这似乎是存储临时变量的好方法吗？怎么样 HTML5，有一些方法来存储值，而不必将它们放在一个 div或类似的东西。我只需要有一个存储在某些中的值在页面上的方式。

还有一个问题。如果我存储该值，这是正确的方法：

$('#CategoryID').html = $(this).attr('data-value')

Answer 1

请使用HiddenField使用jquery存储变量，如下所示：

var tempvalue= $(this).attr('data-value');

$('#my-hidden-field').val(tempvalue);

希望这对你有所帮助。

Answer 2

使用网页上的隐藏字段。例如。

<INPUT TYPE=HIDDEN NAME="customerId" VALUE="1234567">

然后在JQuery中使用.val来处理这些值。

Answer 3

我有时会根据具体情况使用隐藏输入。

<input type="hidden" name="CategoryID" id="CategoryID" />

然后像这样检索它：

var categoryID = $('#CategoryID').val();

我使用输入，因为我觉得html不是页面的标记不应该在那里。

有时最简单的方法就是将服务器中的变量输出到脚本中。

ASP.NET示例：

<script type="text/javascript">
//<!--

var categoryID = <%= <output value from server goes here> %>;

//-->
</script>

Answer 4

函数val()获取元素的值。但只有输入具有值，因此您应使用隐藏输入来存储数据：

<input id="CategoryId" type="hidden" />

但是，您可以访问任何属性，如下所述。请注意attr()已旧，新功能名称为prop() - ＆gt;有关attr()和prop()

的正确解释，请参阅评论

Answer 5

你应该尝试使用HTML5中引入的localStorage API，如果你热衷于此，那么将它存储在隐藏字段中是可行的。

var idForStorage = $('#CategoryID').val();
window.localStorage.setItem('keyToId', idForStorage);

并从localStorage

获取它

var fetchedId = window.localStorage.getItem('keyToId');

注意：localstorage只将值存储为字符串，请记住！：）

此外，如果您想要更旧的浏览器兼容，请不要忘记检查localStorage是否存在并实施不同的解决方案。

的内容

if(typeof(window.localStorage) !== 'undefined'){
    //set item or do whatever
} else {
    //implement other solution or throw an exception
}

祝你好运！

Answer 6

只是一个想法，但你考虑过将值存储在javascript变量中吗？如果你只是在javascript中使用它，为什么还要把它放在隐藏字段或元素中呢？

如果您不使用命名空间/模块，只需在全局范围内声明变量，但如果您使用它，则可以将其存储在使用它的模块的范围内。

只有使用这种方法的注意事项是变量将在页面刷新时重置，但是如果你使用服务器上的值，只是在脚本中那么那应该没问题。

一般情况下，如果服务器需要能够读取它，我只会使用隐藏的输入。

修改

在回复评论时，如果你明智地使用你的javascript，其中包括使用命名空间，那么这种方法可以使用“变量持有者”使你的标记变得杂乱一些优雅

一个非常快速的命名空间支架.....

在名为MyProject.Global.js
的文件中
//This function is truly global function namespace(namespaceString) { var parts = namespaceString.split('.'), parent = window, currentPart = ''; for (var i = 0, length = parts.length; i < length; i++) { currentPart = parts[i]; parent[currentPart] = parent[currentPart] || {}; parent = parent[currentPart]; } return parent; }

在名为MyProject.MyPage.Ui.js
的文件中
namespace('MyProject.MyPage'); MyProject.MyPage.Ui = function () { var self = this; self.settings = {}; function init(options) { $.extend(self.settings, options); //any init code goes here, eg bind elements setValue(); }; }; //this is considered a "private" function function setValue(){ $('#categories > li > a').click(function (e) { e.preventDefault(); self.settings.myValue = $(this).attr('data-value'); refreshGrid('Reference'); }); } function getValue(){ return self.settings.myValue; } //any function within this return are considered "public" return { init: init, getValue: getValue }; };

终于在你的页面中......

$(document).ready(function () { var ui = new MyProject.MyPage.Ui(); ui.init(); }

然后在任何时候你都可以使用......来获取你的价值。

MyProject.MyPage.getValue()

Answer 7

有三种方法可以根据需要存储值：

饼干：好老路。它在任何地方都受支持，但更适合需要保存在不同页面上的值，并且还有其他限制（例如大小，条目数等）。
SessionStorage：不支持任何地方，但有垫片。它允许您存储仅为会话持续的值。例如：

sessionStorage.setItem('key', 'value')

sessionStorage.getItem('key', 'value')

这仅接受字符串作为键和值。如果要存储对象，可以使用JSON.stringify存储对象，稍后使用JSON.parse检索它们。

LocalStorage：sessionStorage的兄弟，但它没有时间限制。它允许您使用与sessionStorage相同的API存储数据，并且随着时间的推移保存数据。

Answer 8

还有一个问题。如果我存储该值，这是正确的方法：

在jQuery中使用Data-属性的更简单方法是使用.data()方法。

<body id="CategoryData" data-value1="someone" data-value2="sometwo">

....

alert( $("#CategoryData").data('value1') ); // popup with text: someone
alert( $("#CategoryData").data('value2') ); // popup with text: sometwo

就个人而言，我宁愿将与项目相关的所有数据存储在包装器Div或其他元素中，并使用jquery.data。

<table data-locationid="1">
  <tr data-personid="1">
    <td>Jon</td>
    <td>Doe</td>
  </tr>
  <tr data-personid="2">
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

HTML5数据 - *属性

从jQuery 1.4.3开始，HTML 5数据属性将自动引入jQuery的数据对象。在jQuery 1.6中改变了嵌入破折号属性的处理，以符合W3C HTML5规范。

Answer 9

如果您想将值存储在JavaScript的一部分中以便从另一部分访问，我只使用一个变量：

var categoryID = null;  // set some kind of default

$('#categories > li > a').click(function (e) {
  e.preventDefault();
  categoryID = $(this).attr('data-value');
  refreshGrid('Reference');
});

稍后当您需要该值时，只需直接访问categoryID。

还有一个问题。如果我存储该值，这是正确的方法

如果您确实想将值设置为div元素的内容，则可以使用jQuery的.html()方法或非jQuery .innerHTML属性：

$('#CategoryID').html( $(this).attr('data-value') );
// or
$("#CategoryID")[0].innerHTML = $(this).attr('data-value');

但如果您不想使用变量，最好使用其他答案中提到的隐藏输入而不是div。

Answer 10

对于浏览器兼容性，其他人建议使用隐藏字段更明智。但出于探索性原因，如果您想使用HTML5，它会提供WebStorage。有关详细信息，请查看http://sixrevisions.com/html/introduction-web-storage/

此外，还有一个名为Lawnchair的框架，适用于需要轻量级，自适应，简单且优雅的持久性解决方案的html5移动应用程序。

如何在网页中存储值（字符串）

10 个答案: