1

我正在尝试找出一种方法来干燥以下代码，该代码查看是否存在某些本地存储密钥，如果存在则执行某些操作。它可能有很多键，但它们都将被编号以与相关元素 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');
}
4

2 回答 2

1

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

对于更大的 id，我会建议$(this).attr('id').slice("btn-item".length);which get 324from "btm-item324"。

话虽这么说，为什么不这样做呢？

$('*[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');
}
于 2012-12-08T13:42:17.317 回答
1

要（正确）迭代可能的键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');
    }
}

或者，反转逻辑并首先查看 DOM：

$('[id^="item"]').addClass(function() {
    return localStorage.getItem(this.id) ? "active" : "";
});
于 2012-12-08T14:13:59.617 回答