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

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

score 2 · Accepted Answer

请使用如下HiddenField方式存储变量jquery：

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

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

希望这对你有帮助。

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

但通常您可以访问任何属性，如下所述。请注意，它attr()是旧的，新的函数名称是prop()-> 请参阅评论以获取有关attr()和的正确解释prop()

score 1 · Accepted Answer

如果您热衷于将其存储在隐藏字段中，您应该尝试使用 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
}

祝你好运！

score 1 · Accepted Answer

只是一个想法，但您是否考虑过将值存储在 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()

score 0 · Accepted Answer

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

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

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

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

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

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

score 0 · Accepted Answer

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

Data-在jQuery 中使用属性更简单的方法是使用.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 规范。

score 0 · Accepted Answer

如果您想将值存储在 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。

score 0 · Accepted Answer

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

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

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

10 回答 10

Related

Reference