Javascript，项目在被删除后保留在本地存储中

Question

我正在构建一个电话簿，用户可以在其中添加、删除和搜索联系人。到目前为止一切正常，我可以在本地存储中添加和保存联系人，也可以在 UI 中删除它们。但是删除它们后，它们仍然保留在本地存储中，因此在刷新页面时它们会重新出现。 欢迎提出任何建议！

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

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

//call the method:

document.querySelector('#contact-items').addEventListener('click', (e) => {
	
    
      Store.removeContact(e.target.parentElement);
      
      
    });

Answer 1

试试这个...

static removeContact(phone) {
    const contacts = Store.getContact();
    contacts = contacts.filter(c => contact.phone !== phone )
    localStorage.setItem('contacts', JSON.stringify(contacts));
}