如何使用JavaScript从LocalStorage中删除指定匹配键的用户对象？

Let's break down what's going wrong here and how to fix it step by step:

The Problem with Your Current Code #

Your deleteUser function uses localStorage.removeItem("users", user) — but localStorage.removeItem() only accepts one argument: the key of the entire item you want to delete. That’s why it’s wiping out your whole users object instead of just the specific user you targeted.

The Correct Approach #

You need to modify the existing users object, remove the targeted user from it, then save the updated object back to LocalStorage. Here's the fixed code:

function deleteUser(username) {
  // Retrieve the users object from LocalStorage (handle edge case where it might not exist)
  let users = JSON.parse(localStorage.getItem("users"));
  
  // Exit early if users doesn't exist or the target user isn't found
  if (!users || !users[username]) {
    console.log(`User ${username} doesn't exist!`);
    return;
  }

  // Delete the specific user property from the users object
  delete users[username];

  // Save the updated users object back to LocalStorage (remember to stringify it!)
  localStorage.setItem("users", JSON.stringify(users));
}

Key Changes Explained #

• Instead of removeItem, we use the delete operator to remove just the targeted user property from the users object.
• Added checks to handle cases where users might not exist in LocalStorage, or the user you’re trying to delete isn’t present — this prevents unexpected errors.
• After modifying the object, we use localStorage.setItem() to save the updated version back to storage (LocalStorage only stores strings, so we have to stringify the object first).

If You Wanted to Use an Array Instead (Optional) #

You mentioned trying to convert the object to an array earlier. If you prefer storing users as an array (e.g., [{username: 'Jon', genrePref: 'rock'}, ...]), here’s how deletion would work:

function deleteUserFromArray(username) {
  let users = JSON.parse(localStorage.getItem("users")) || [];
  
  // Create a new array excluding the user with the matching username
  const updatedUsers = users.filter(user => user.username !== username);
  
  // Save the filtered array back to LocalStorage
  localStorage.setItem("users", JSON.stringify(updatedUsers));
}

This works by filtering out the unwanted user and saving the new, modified array.

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