Question

我正在尝试找出一种方法来干掉以下代码，这些代码会查看某些本地存储密钥是否存在，然后执行某些操作。它可能有许多密钥，但它们都将编号为与相关的元素id结合，即key：item1＆gt; ＃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');
}

Answer 1

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

对于更高的ID，我建议$(this).attr('id').slice("btn-item".length);从324获取"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');
}

Answer 2

要（正确）迭代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" : "";
});

使用jQuery动态查找localstorage密钥

2 个答案: