通讯录开发：UI删除联系人后LocalStorage未同步问题求助

Hey there! I see the exact issue right away—your delete functionality isn’t correctly targeting the contact entry in localStorage, which is why deleted contacts pop back up after a refresh. Let’s fix this step by step.

Core Problem #

In your click event listener, you’re passing e.target.parentElement (the <li> DOM element) to Store.removeContact(), but the method expects a phone number string to match against the contacts stored in localStorage. Since a DOM element can never equal a phone number, the splice() logic never triggers, leaving the contact intact in localStorage.

Step-by-Step Fixes #

1. Correct the Click Event to Pass the Phone Number #

First, we need to extract the contact’s phone number from the DOM when the delete button is clicked. Update your event listener like this:

document.querySelector('#contact-items').addEventListener('click', (e) => {
  // Ensure we only trigger when the delete icon is clicked
  if (e.target.classList.contains('delete')) {
    // Safely get the parent contact list item
    const contactItem = e.target.closest('.collection-item');
    // Extract the phone number text from the DOM
    const phoneNumber = contactItem.querySelector('.ph').textContent.trim();
    // Pass the actual phone number to the remove method
    Store.removeContact(phoneNumber);
    // Remove the DOM element immediately for UI feedback
    contactItem.remove();
  }
});

• closest('.collection-item') ensures we grab the correct parent <li> even if the click lands directly on the trash icon.
• We target the .ph span that holds the phone number, trim any extra whitespace, and pass that string to removeContact—this matches what the method expects.

2. (Optional) Simplify the removeContact Method #

Your current forEach + splice works, but using Array.filter() is cleaner and avoids mutating the original array:

static removeContact(phone) {
  const contacts = Store.getContact();
  // Filter out the contact with the matching phone number
  const updatedContacts = contacts.filter(contact => contact.phone !== phone);
  localStorage.setItem('contacts', JSON.stringify(updatedContacts));
}

3. Fix a Minor DOM Issue in addContactToList #

I noticed your insertAdjacentHTML starts with an extra closing </li> tag—this creates invalid DOM structure. Remove that extra tag:

static addContactToList(contact) {
  const list = document.querySelector('#names');
  list.insertAdjacentHTML("afterbegin", `
    <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>
  `);
}

Why This Works #

Now when you click the delete icon:

1. We extract the correct phone number from the DOM.
2. removeContact finds the matching entry in localStorage and removes it.
3. The DOM element is deleted right away, so the UI updates instantly without needing a refresh.

After these changes, your deleted contacts will stay gone even after you reload the page!

内容的提问来源于stack exchange，提问作者maxianna