从 localStorage 中删除记录时从数组中删除元素

Question

我有一个这样的 localStorage 对象：

密钥：jpxun

值：[{"id":"0","name":"royal"},{"id":"1","name":"tippins"},{"id":"4","name":"leviosa"},{"id":"5","name":"vicious"}]

我有这个 JS 来显示 localStorage 的输出：

var jpxun = JSON.parse(localStorage.getItem('jpxun')) || [];

if (jpxun) {
    var jpxun_length = jpxun.length;
} else {
    var jpxun_length = 0;
}

var hst = document.getElementById("usernames");

var MyUsernames = JSON.parse(localStorage.getItem("jpxun"));

if (jpxun_length > 0) {

    // declare array to hold items for outputting later in plain text format
    var plain_text_array = [];

    for (var i = 0; i < MyUsernames.length; i++) {

        var un1 = MyUsernames[i].name;

        hst.innerHTML += "<li>" +"<a id="+MyUsernames[i].id + " href='#content' onclick='deleteById(this)'>x </a>" + un1 + "</li>";

        // add word to plain text array
        plain_text_array.push(un1);

    }

}

每个元素都以“x”作为超链接输出到列表项中，以便可以单击该元素并从 localStorage 中删除该元素。

这是从 localStorage 中删除项目的代码：

var deleteById = function ( self ){

  MyUsernames = MyUsernames.filter(function(elem) {
      return elem.id !== self.id;
  });
          
  localStorage.setItem("jpxun",JSON.stringify(MyUsernames));
  
  self.parentNode.parentNode.removeChild(self.parentNode);
  
}

效果很好。

很遗憾，我不太明白deleteById 中的代码是如何工作的。

既然如此，当从 localStorage 中删除其值时，我一直在研究如何从 plain_text_array 中删除相应记录。

Answer 1

我会尝试在包含该字符串 'id="item_id"' 的数组中查找文本：

plain_text_array = plain_text_array.filter(item => !item.includes(`id="${self.id}"`));

只需将其添加到deleteById函数的末尾即可。