The items persist in local storage after being removed

1

I’m building a Phone Book where users are able to add, delete and search contacts. Everything works well so far, I can add and save contacts in local storage and I can delete them in the UI. But after deleting them, they still persist in the local storage, so they reappear when the page is refreshed. Any suggestion is welcome!

I have a Contact class:

class Contact {
      constructor(name, phone) {
     
        this.name = name;
        this.phone = phone;
    	 }   
    }

Output:

 static addContactToList(contact) {
	const itemDiv = document.querySelector('#contact-items');  
    const list = document.querySelector('#names');
	
	
    list.insertAdjacentHTML("afterbegin", `
      </li>
      <li class="collection-item">
            
  <a href="#"><i class="fas fa-user text-blue "></i><span class="text-grey">${contact.name} </span></a>
  
      <span class="contact-phone"><i class="fas fa-phone text-blue phi "><span class="text-grey ph">${contact.phone}</span></i></span>
         
	<i class="far fa-trash-alt delete"></i>
	</li> `);
	  
    ;
  }

Here is removeContact function in the Store class:

 static removeContact(phone) {
        const contacts = Store.getContact();
         
        contacts.forEach((contact, index) => {
    	  
          if(contact.phone === phone) {
            contacts.splice(index, 1);
          }
    	  
        });
    	
        localStorage.setItem('contacts', JSON.stringify(contacts));
    	 
      } 
    }

And here I call the method:

document.querySelector('#contact-items').addEventListener('click', (e) => {
	

    // Remove contact from storage
      Store.removeContact(e.target.parentElement);
      
      
    });
2

What do the addContact and getContact functions look like?

3

Here’s the whole code of the Store class, that builds the methods for local storage:

class Store {
  static getContact() {
    let contacts;
    if(localStorage.getItem('contacts') === null) {
      contacts = [];  //empty array of contacts
    } else {
      contacts = JSON.parse(localStorage.getItem('contacts'));
    }

    return contacts;
  }

  static addContact(contact) {
    const contacts = Store.getContact();
    contacts.push(contact);
    localStorage.setItem('contacts', JSON.stringify(contacts));
  }
  

  static removeContact(phone) {
    const contacts = Store.getContact();
     
    contacts.forEach((contact, index) => {
	  
      if(contact.phone === phone) {
        contacts.splice(index, 1);
      }
	  
    });
	
    localStorage.setItem('contacts', JSON.stringify(contacts));
	 
  } 
}
4

My current guess after a quick skim of the code is this:

contacts.forEach((contact, index) => {
	  
      if(contact.phone === phone) {
        contacts.splice(index, 1);
      }
	  
    });

using splice within a forEach loop usually results in problems as what your iterating over changes suddenly. I recommend doing something like:

const newContacts = contacts.filter(contact => contact.phone !== phone);
localStorage.setItem('contacts', JSON.stringify(contacts));

Another potential problem is removing the contacts using .map wont update the original contacts via reference from getContact(), so this approach might create other problems, I’ll leave to you ;D

5

Thank you for the solution. I actually tried it too, as I thought that might be the problem but, though it should…, it doesn’t remove the items from the local storage. I followed the same pattern in different similar projects and it worked well. I have no idea where the code breaks here. I feel a bit blocked and don’t know how I could approach it (I’m still learning :slight_smile: …)