使用jQuery动态查找本地存储密钥

我正在试图找出一种方法来消除下面的代码，它会查看是否存在某些本地存储密钥，如果存在，则会执行一些操作。它可能有许多键，但它们都将被编号以与相关元素id相匹配，即key:item1>#item1等

if (localStorage.getItem('item1')) {
  $('#item1').addClass('active');
}

if (localStorage.getItem('item2')) {
  $('#item2').addClass('active');
}

etc.

我最近学会了对元素id做一些类似的事情，所以我想知道是否/如何将这种逻辑应用于查找本地存储密钥而不是元素id

$('*[id^=btn-item]').click(function () {
  var id = $(this).attr('id').slice(-1); 
  $('#item'+id).addClass('active');
}

---

请注意，切片代码仅在id小于10时有效

对于更大的id，我建议使用

$（this.attr（'id'）.slice（“btn item.length”）从
“btm-item324”
获取
324

既然如此，为什么不这样做呢

$('*[id^=btn-item]').click(function () {
  var id = $(this).attr('id').slice("btn-item".length); 
  if (localStorage.getItem('item'+id)) {
     $('#item'+id).addClass('active');
  }
}

如果您不想在按钮操作上执行此操作，可以对可能的键进行迭代，如下所示：

for (var i=0; i<100; i++) {
   if (localStorage['item'+i]) $('#item'+i).addClass('active');
}

for（var i=0；iTo（正确地）在
localStorage
中迭代可能的键，而不事先知道最大可能的键号：

var re = /^item\d+$/;
for (var i = 0, n = localStorage.length; i < n; ++i) {
    var key = localStorage.key(i);
    if (re.test(key)) {
       $('#' + key).addClass('active');
    }
}

是否需要对
localStorage
中的每个键都执行此操作，还是只对预先知道的特定键执行此操作（可能是因为您单击了具有相应名称的元素）？将有某些键存在，但不明确。我需要能够说…如果有任何键可用，请将它们的数值应用于id末尾具有相同数值的元素。这需要能够在两个不同的页面上工作。希望这有意义？@Alnitak I不会迭代所有键，它会这样做只需测试指定格式的键。您有更有效的解决方案来检查这些键吗？localStorage没有查询语言。干杯，但我需要能够将其应用到不同的页面。我在那里提供的单击功能只是为了说明我认为我可以如何解决此问题。顺便说一句。感谢您的帮助我没有想到的事情。我想我最终会注意到的，所以你的提示会很方便！@dystroy Perfect，这正是我需要的。循环从来都不是我的强项，但我可以理解。非常感谢：）@Jamie注意，如果你有超过100把钥匙，这将失败。类似地，它尝试测试100个密钥也是低效的，即使列表中只有5个…@Alnitak谢谢。大概我可以用一个相当满的本地存储来改变iw，你真的认为这比测试100个键更有效吗？我们不知道OP的本地存储有多满。真正的问题是，你永远不应该使用硬编码的限制。无论如何，我刚才添加的第二个代码可能比这两个代码都好。@roy再看一看，它一点也不像。我的第二个代码使用CSS选择器在每个可能匹配的DOM节点上迭代，然后测试匹配元素是否存在于
localStorage
中。我以为我已经提出了，但我忘了把它放在有点击处理程序的那个和循环之间。这就是路。确实较慢，但更干净。@实际上，我怀疑它是否较慢-在现代浏览器上，CSS选择器将在浏览器中直接有效地处理，然后检查ID是否存在于
localStorage
。
$('[id^="item"]').addClass(function() {
    return localStorage.getItem(this.id) ? "active" : "";
});