Check for specific value in array stored in localStorage?

Question

I'm trying to create an array and store it in localStorage on click.

I can do this using the following code. this code will create an array when the buttons are clicked but I need to be able to remove the same value again if the same button is clicked again.

But my code only adds (push) the values to the array and it doesn't remove it.

I know my issue is from where I need to look in the array for the value that I added but I don't have any idea how to do this.

This my code:

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);
});

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

Please read Why is “Can someone help me?” not an actual question? before attempting to ask more questions. — user177800
– user177800, Commented Apr 12, 2018 at 15:02
@RoryMcCrossan when you say use this logic and provide a link, it will help if you could actually tell me which logic on that page as well as there are quite a few different logics on that page! — Rooz Far
– Rooz Far, Commented Apr 12, 2018 at 15:14
You're right, it's a little more involved in your case than it was in the duplicate. I added an answer for you below by way of an apology :) — Rory McCrossan
– Rory McCrossan, Commented Apr 12, 2018 at 15:22

Rory McCrossan · Accepted Answer · 2018-04-12 15:20:45Z

1

The issue is that you have an array of objects deserialised from localStorage. Therefore your use of indexOf(), searching for an integer, is not going to work.

Instead you need to find the index of the object which has the selected id. To do this you can use map() to build a simplified array of ids, then get the index from that. Try this:

Working example - I've put it in a fiddle as SO restricts access to localStorage in snippets.

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

answered Apr 12, 2018 at 15:20

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rooz Far Over a year ago

appreciate your help.

Collectives™ on Stack Overflow

Check for specific value in array stored in localStorage?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related