使用 javascript 从本地存储中删除匹配的密钥对象答案

【问题标题】：remove matching key object from localstorage using javascript使用 javascript 从本地存储中删除匹配的密钥对象
【发布时间】：2021-10-28 23:58:49
【问题描述】：

我无法根据文本字段中输入的内容删除用户。我的本地存储有以下数据。 users 是 key，values 是带有 username 和genrePref 的对象列表。

// Saved in localstorage
users = {
    jon: {username: 'Jon', genrePref: 'rock'},
    lucy: {username: 'Lucy', genrePref: 'pop'},
    mike: {username: 'Mike', genrePref: 'rock'},
    luke: {username: 'Luke', genrePref: 'house'},
    james: {username: 'James', genrePref: 'house'},
    dave: {username: 'Dave', genrePref: 'bass'},
    sarah: {username: 'Sarah', genrePref: 'country'},
    natalie: {username: 'Natalie', genrePref: 'bass'}
}

我在 Javascript 中编写了一个函数，当表单提交时它会调用它，它将用户名作为参数传递并调用该函数。

function deleteUser(username) {
    const users = JSON.parse(localStorage.getItem("users"));
    const user = users[username];
    localStorage.removeItem("users", user);
}

这会从 localStorage 中删除所有内容，而不是一个用户名。我在网上搜索了答案，并试图将对象转换为数组，但我无法让它工作。任何解决此问题的提示都值得赞赏！

【问题讨论】：

本地存储存储字符串。您似乎没有以任何方式解析字符串（例如，通过JSON.parse）。您如何存储显示为“保存在本地存储中”的信息？
stackoverflow.com/questions/46160681/…
removeItem("users") 确实会从 localStorage 中删除 users。这里没有惊喜

标签： javascript local-storage

【解决方案1】：

localStorage.removeItem() 不接受两个参数，而是一个。
您正在传递它users，它将作为键并从存储中删除相应的匹配项。

function deleteUser(username) {
    const users = JSON.parse(localStorage.getItem("users"));
    delete users[username];
    localStorage.setItem("users", JSON.stringify(users));
}

【讨论】：

【解决方案2】：

如果您确实将其存储在本地存储中，那么您在保存时已经以某种方式（可能是 JSON？）对其进行了编码。检索时您必须对其进行解码。

例如，如果是 JSON，你会这样做：

function deleteUser(username) {
    // Get *and parse* the data
    const users = JSON.parse(localStorage.getItem("users"));
    // Remove the named user from the object
    delete users[username];
    // Store the updated object
    localStorage.setItem("users", JSON.stringify(users));
}

但是，如果您使用其他东西（XML 等），只需执行您在上面看到 JSON.parse 的任何反序列化步骤，然后执行您看到 JSON.stringify 的序列化步骤。

【讨论】：

（哎呀，有点编辑错误——如果你看到上面的removeItem，点击刷新。它应该是setItem。）

【解决方案3】：

根据关于 removeItem 函数的 MDN 文档，第一个参数是要删除的对象的键。

https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem

通过您的实现，您基本上是在删除整个 users 对象。 getItem 和 removeItem 都对 localstorage 的键进行操作，例如，对于

localStorage = {
 'fruits': {
  'apples': ['one', 'two', 'three'],
  'peaches': ['one', 'two', 'three'],
  'oranges': ['one', 'two', 'three']
 }
}

您的removeItem 将删除整个apples 或peaches。你不能用它来删除更深层次的东西。

您想要做的是获取整个fruits，删除密钥并再次将其传递给setItem

const fruits= JSON.parse(localStorage.getItem('fruits')) // remember that localStorage stores strings only
delete fruits['oranges'];
localStorage.setItem('fruits', fruits);

为了获得最佳解决方案，您需要深度克隆此对象以避免突变

【讨论】：