How to store dynamically generated list items in localstorage individually, so each with their own key?

JavaScript
1

I would like to store dynamically generated list items in local Storage as separate entries. I’ve stored them in a single key/value pair, so all the list items are one string. How to store them as individual key/value pairs in local Storage. I want to target them individually and delete them from the UI and localestorage.

var inputValue = document.getElementById('myText');
var itemsArr = [];
var p = document.getElementById('pos');
var storedValues = localStorage.getItem("myItems")

// Add button, enter data make list

var btn = document.getElementById('btn');
    btn.addEventListener('click', insertHTML);
    
function insertHTML(e) {
    if(inputValue.value === ''){
        alert("Please enter valid data!");
    }else{
       p.insertAdjacentHTML('beforeend', 
            `<li id="item"><input type="checkbox" id="check">
             <span>${inputValue.value}</span>
             <span><img src="delicon.png" class="delCrss"></span></li>`)
        }
    itemsArr.push(inputValue.value);
    store();
    clearInput();
}

function store(){
     localStorage.setItem("myItems", p.innerHTML);
}

//Keep data after page refresh or closing browser

function getValues(){
       var storedValues = localStorage.getItem("myItems")
       if(storedValues){
              p.innerHTML=storedValues;
       }
}
getValues()   

//Press enter key to add input data to list

var input = document.querySelector('body');
    input.addEventListener("keyup", function(e){

       if(e.keyCode === 13 && inputValue.value){
              insertHTML();
       }else if(inputValue.value ==='' && e.keyCode === 13){
              alert("Please enter valid data!");
       }
})


// Clear button clear input field

var clr = document.getElementById('clr');
    clr.addEventListener('click', clearInput);

function clearInput(e){
       inputValue.value = '';
}


//Delete last item button, deletes last list item

var btn2 = document.getElementById('delete');
    btn2.addEventListener('click', delItem);

function delItem(e) {
     var lst = document.getElementById('pos');
       if(lst.hasChildNodes()){
         lst.removeChild(lst.lastChild);
       }
}

//Delete all button, deletes all list items from list and storage

var btn3 = document.getElementById('delAll');
    btn3.addEventListener('click', deleteAll);

function deleteAll(e) {
      document.getElementById('pos').innerHTML = '';
      var c = confirm("Are you sure you want to delete all the items?")
      if(c == true){
         localStorage.clear();
      }else{
         getValues();
         store()
       }
}

//deletes individual items from list by clicking X

 var ul = document.querySelector('#pos');
     ul.addEventListener('click', function(e){
              var x = e.target 
              console.log(x)                                   
       if(e.target.className==='delCrss'){
              ul.removeChild(e.target.parentNode.parentNode);
              localStorage.removeItem("item")
       }
})
2

I may be misunderstanding your question, but it looks like you said you’ve dynamically set a list of items as a value to the key "myItems". You now want to go through that list and set each individual item as its own key/value pair on localStorage?

As long as I’m correct in my understanding, one solution would be to simply parse (or split) the string of values into an array, loop over them, and set each individual item to your desired key/value pair.

3

You should be managing data and storing the it in localStorage, not the HTML. Your functions should generate HTML markup using data and pushing that to your page. A function that removes an HTML element from the page might also remove it from your state which would be good if you had an ID for each list item.

Realistically what you’re ending up with having to build is a state loop that frontend frameworks like react, vue, angular perform. When your state changes an update event triggers re-rendering the page UI to reflect that change.

Like I said, you can do this on a smaller scale. Just store data as data and generate HTML with that data. If you properly index your data you can combine operations that remove/add/modify data on the page to also do so with your data, or vice-versa.