Question

我试图创建一个数组并在点击时将其存储在localStorage中。

我可以使用以下代码执行此操作。单击按钮时，此代码将创建一个数组，但如果再次单击相同的按钮，我需要能够再次删除相同的值。

但是我的代码只是将值添加（推送）到数组中，并且它不会删除它。

我知道我的问题是我需要在数组中查看我添加的值，但我不知道如何执行此操作。

这是我的代码：

＆＃13;

var favorites = JSON.parse(localStorage.getItem('favorites')) || [];

$(document).on('click', ".addToFavBtn", function(e) {
  var id = $(this).attr('id');
  var title = $(this).attr('data-cont');
  var item = e.target;
  var index = favorites.indexOf(id);
  
  // return if target doesn't have an id (shouldn't happen)
  if (!id) 
    return;

  if (index == -1) {
    var myarray = {
      id: id,
      title: title
    };
    favorites.push(myarray);
  } else {
    favorites.splice(index, 1);
  }
  localStorage.setItem('favorites', JSON.stringify(favorites));
  console.log(favorites);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="addToFavBtn" id="12321" type="button" data-cont="test 1.1" value="test 1">
<input class="addToFavBtn" id="1" type="button" data-cont="test 1.3" value="test 1.3">
<input class="addToFavBtn" id="12" type="button" data-cont="test 1.44" value="test 1.44">
<input class="addToFavBtn" id="271" type="button" data-cont="test 66" value="test 66">

＆＃13;

Answer 1

问题是你有一个从localStorage反序列化的对象数组。因此，使用indexOf()搜索整数不会起作用。

相反，您需要找到具有所选id的对象的索引。为此，您可以使用map()构建一个简化的id数组，然后从中获取索引。试试这个：

Working example - 我把它放在一个小提琴中，因为SO限制了对片段中localStorage的访问。

var favorites = JSON.parse(localStorage.getItem('favorites')) || [];

$(document).on('click', ".addToFavBtn", function(e) {
  var id = this.id;
  if (!id)
    return;

  var title = $(this).data('cont');
  var index = favorites.map(function(x) { return x.id; }).indexOf(id);
  if (index == -1) {
    favorites.push({
      id: id,
      title: title
    });
  } else {
    favorites.splice(index, 1);
  }
  localStorage.setItem('favorites', JSON.stringify(favorites));
  console.log(favorites);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="addToFavBtn" id="12321" type="button" data-cont="test 1.1" value="test 1">
<input class="addToFavBtn" id="1" type="button" data-cont="test 1.3" value="test 1.3">
<input class="addToFavBtn" id="12" type="button" data-cont="test 1.44" value="test 1.44">
<input class="addToFavBtn" id="271" type="button" data-cont="test 66" value="test 66">

检查存储在localStorage中的数组中的特定值？

1 个答案: