localStorage remove one value and keep existing values

Question

I am trying to store two type of lists (add, remove) into localStorage. By default, I will add some values. And then user can remove that name if they don't want it. Once they remove the name from #notneeded list it will add into #needed list. I have done that case too.

JsBin Link

Default Case:

Problem is Here:

Now, you can see. I clicked EEE from second list. In visual screen it works fine. EEE removed from second list and added into first list. In localStorage first list is working fine as expected.

add => ["AAA","BBB","EEE"]

But, In second list I am expecting it should update like this

remove => ["CCC","DDD","FFF","GGG"]

instead of this

["CCC","DDD","EEE","FFF","GGG","\n\t\t

CCC

DDD

FFF

GGG

"]

What I am doing wrong here?

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>

Answer 1

Problem is here

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

This returns string, not actual values you expect

const unselect = document.getElementById('notneeded')
const badValues = unselect.innerHTML
const goodValues = [].map.call(unselect.children, (e) => e.textContent) // using .call
const goodValues2 = [...unselect.children].map(e => e.textContent) // using spread operator

console.log(badValues)
console.log(goodValues)
console.log(goodValues2)

<ul id='notneeded'>
  <li>one</li>
  <li>two</li>
</ul>

Answer 2

You are appending the innerHtml of the ul to the uliArray

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