如何从具有多个值的 localstorage 中的键中删除一个值？

Question

我以前看过这个问题，但解决方案对我没有帮助，所以我又问了一遍。

目前，我正在将值存储到一个数组中，并且该数组正在存储到本地存储中。

这是对象

data.items -

0: {id: 190217270, node_id: 'MDEwOlJlcG9zaXRvcnkxOTAyMTcyNzA=', name: '3-Bit-CNC-Starter-Pack'}
1: {id: 187179414, node_id: 'MDEwOlJlcG9zaXRvcnkxODcxNzk0MTQ=', name: 'inb-go}

我已经通过这个映射并使用 'name' 作为值。我使用这个函数通过按钮调用这个值

const favs = [];

  function checkId(e) {
    if (e.target.value !== ""){
      if (!favs.includes(e.target.value)){
      favs.push(e.target.value);
      localStorage.setItem("name", JSON.stringify(favs));
      console.log(favs);
      document.getElementById("favsarray").innerHTML = favs;
      }
    }
     
    }

并从本地存储中删除值我正在使用这个函数。

function removeId(e, value) {
    if (e.target.value !== "") {
     
      favs.pop(e.target.value);
      console.log(favs);
      document.getElementById("favsarray").innerHTML = favs;
      const stored = JSON.parse(localStorage.getItem("name"));
      delete stored[value, e.target.value];
      localStorage.setItem("name", JSON.stringify(stored));
      console.log(stored);
      
    }
  }

虽然该值正在从数组中删除，但并未从本地存储中删除。

旁注 - 我使用单独的按钮调用此函数。

控制台日志

array (item is gone)
[]

localstorage (the value is still there)
[
    "Spiral-Up-Cut-Router-Bit"
]

但是如果我 select 将另一个项目添加到 localstorage，那么之前的项目将被删除。

UNFAVORITE - FUNCTION REMOVEid
[
        "Spiral-Up-Cut-Router-Bit"
    ]

 NEW FAVORITE - FUNCTION NEWId

[
    "graphqless"
]

我希望这是有道理的，我试着尽可能地添加细节。

Answer 1

尝试使用localStorage.removeItem方法从存储中移除项目：

function removeId(e, value) {
   if (e.target.value !== "") {     
      favs.pop();
      // other code here

      localStorage.removeItem('name'); // method to remove item from storage
      
   }
}

更新：

如果从数组中删除了一个项目并且我们想将这个更新后的值设置为 localstorage，那么我们可以只更新这个值：

function removeId(e, value) {
   if (e.target.value !== "") {     
      favs.pop();
      console.log(favs);
      document.getElementById("favsarray").innerHTML = favs;
      const stored = JSON.parse(localStorage.getItem("name"));
      delete stored[value, e.target.value]; // this code looks very fishy - charlietfl

      localStorage.setItem("name", JSON.stringify(favs));

      console.log(stored);      
   }
}

Answer 2

最简单的方法是直接覆盖 localStorage 中的项目。从 favs 数组中删除项目后，再次调用 localStorage.setItem("name", JSON.stringify(favs)); 就完成了。

Answer 3

我不确定这是否对您有帮助，但无论如何我都会分享。

我不明白上面提到的这部分代码：

delete stored[value, e.target.value];

您在 值和 e.target.value 中传递了什么？如果它是名称 ("Spiral-Up-Cut-Router-Bit") 本身，则删除不会从数组中删除该值。通常，当你在 JS 数组上使用 delete 运算符时，你需要传递值的索引，而不是值本身。

此外，删除数组元素时，数组长度不受影响。即使您删除数组的最后一个元素，这仍然成立。

当删除运算符删除数组元素时，该元素不再存在于数组中。

您可以参考上面的输出图像，当我使用该值删除数组值时，即使它的输出为真，它也不会从数组中删除该值。但是当我使用索引值进行删除时，它从数组中删除了该值。

注：数组只是去掉了值，并没有清除索引。

也许，您应该使用 splice 从数组中删除特定值并将新数组存储到存储中。

此外，delete 运算符也适用于 JS 对象。如果您想阅读更多相关信息，可以转到此 link。✌

使用拼接删除：

var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; trees.splice(3,1); console.log(trees);

Answer 4

按照建议，使用 splice（这也会更新数组的 length）从数组中删除条目。

const stored = JSON.parse(localStorage.getItem("name"));
const index = stored.indexOf(nameValue);
if (index !== -1) {
  stored.splice(index, 1);
  localStorage.setItem("name", JSON.stringify(stored));
}

参见：

如何从具有多个值的 localstorage 中的键中删除一个值？

How to remove one value from a key in localstorage that has many values?

javascript

arrays

local-storage

reactjs