Javascript localStorage删除一个值并保留现有值

我正在尝试将两种类型的列表（添加、删除）存储到

localStorage

中。默认情况下，我将添加一些值。然后用户可以删除那个名字，如果他们不想要的话。一旦他们从

#notneeded

列表中删除名称，它将添加到

#needed

列表中。我也做过那个案子

默认情况：

问题就在这里：

现在，你可以看到。我从第二个列表中单击了

EEE

。在可视屏幕上，它工作得很好<代码>EEE从第二个列表中删除并添加到第一个列表中。在

localStorage

中，第一个列表工作正常

添加=>[“AAA”、“BBB”、“EEE”]

但是，在第二个列表中，我希望它应该像这样更新

删除=>[“CCC”、“DDD”、“FFF”、“GGG”]

而不是这个

[“CCC”、“DDD”、“EEE”、“FFF”、“GGG”、“\n\t\t

CCC

DDD

FFF

GGG

”]

我做错了什么

Javascript

          const selected = document.getElementById('needed');
          const unselect = document.getElementById('notneeded');

            //selected lists onload event
            window.addEventListener('load', function(e){
                var getLists = localStorage.getItem("add");
                if (getLists === null) {
                    const defaultLists = [ 'AAA', 'BBB' ];
                    const unselectedLists = [ 'CCC', 'DDD', 'EEE', 'FFF', 'GGG' ];

                    defaultLists.forEach(item => {
                      liMaker(0, item);
                    });

                    unselectedLists.forEach(item => {
                      liMaker(1, item);
                    });

                    localStorage.setItem('add', JSON.stringify(defaultLists));
                    localStorage.setItem('remove', JSON.stringify(unselectedLists));
                } else {
                    const defaultLists = JSON.parse(localStorage.getItem('add'));
                    const unselectedLists = JSON.parse(localStorage.getItem('remove'));

                    defaultLists.forEach(item => {
                      liMaker(0, item);
                    });

                    unselectedLists.forEach(item => {
                      liMaker(1, item);
                    });
                }
            });

            //unselected lists onclick event
            unselect.addEventListener('click', function(e){
                const tgt = e.target;

                let liArray = JSON.parse(localStorage.getItem('add')) || [];
                liMaker(0, tgt.innerHTML);
                liArray.push(tgt.innerHTML);

                localStorage.setItem('add', JSON.stringify(liArray));

                if(tgt.tagName.toUpperCase() == "LI") {
                    e.target.parentNode.removeChild(tgt);
                }

                const unselect = document.getElementById('notneeded').innerHTML;
                let uliArray = JSON.parse(localStorage.getItem('remove')) || [];
                uliArray.push(unselect);

                console.log(uliArray);

                localStorage.setItem('remove', JSON.stringify(uliArray));
            });

            const liMaker = (num, text) => {
              const li = document.createElement('li');
              li.textContent = text;
              if(num === 0) {
                selected.appendChild(li);
              } else if(num === 1) {
                unselect.appendChild(li);
              }  
            }

HTML

<ul id="needed">
</ul>
<ul id="notneeded">
</ul>

问题就在这里

const unselect = document.getElementById('notneeded').innerHTML;

这将返回字符串，而不是您期望的实际值

const unselect=document.getElementById（'notneeded'）
const badValues=unselect.innerHTML
const goodValues=[].map.call（unselect.children，（e）=>e.textContent）//使用.call
const goodValues2=[…unselect.children].map（e=>e.textContent）//使用扩展运算符
console.log（badValues）
console.log（goodValues）
console.log（goodValues2）

一个
两个

您正在将ul的innerHtml附加到

uliArray

  const unselect = document.getElementById('notneeded').innerHTML;
  let uliArray = JSON.parse(localStorage.getItem('remove')) || [];
  uliArray.push(unselect);

---

能否添加console.log以在unselect onclick处理程序中打印tgt.innerHTML？我很确定这是由于ul上定义了处理程序，tgt就是ul本身。您需要将onclick处理程序添加到

li

元素中。