Appending values in to a new array using JS

Question

I'm trying to build a form (more for personal learning) using HTML, JS and local storage to:

Take inputs from user
Display the inputs from the user
Store the data in local storage
Give an option to the user to strike through an item or strike through everything

Questions:

The local storage always is storing the latest value entered and not the entire array. For some reason the push array is not appending all the values. What am i missing?
The strike through works for all at once but not for each option. What's the way to go about it for each option?

function display(){
      var master_list = [];
      var data = document.getElementById('to_do').value;
      master_list.push(data);
      document.getElementById('form_data').innerHTML += "<li>"+ data +"</li>";
      console.log("data is "+ data);
      console.log("master list is "+ master_list);
      // storeData(master_list);
    }
    
    function remove(){
      var list = document.getElementById('form_data').innerText;
      // console.log("the data is " + list);
      document.getElementById('form_data').innerHTML = list.strike();
    
    }
    
    function storeData(master_list){
      localStorage.setItem("master_list", JSON.stringify(master_list));
    
    }

 <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <meta charset="utf-8">
        <title>The To-do Application</title>
        <script src="to_do_app.js" charset="utf-8"></script>
      </head>
    
      <body>
        <h1>Welcome to the To-Do application</h1>
        <label>Enter your to-do item: </label>
        <input type="text" id="to_do" placeholder="eg: groceries">
        <button onclick=display()> Add </button>
        <h3>Added Items are:</h3>
        <div id="form_data"></div>
        <br>
        <button onclick=remove()> Clear All </button>
        <!-- <h6>Note: To remove please click on the item</h6> -->
      </body>
    
    </html>

Please, ask just one question per post. Also note that `strike()` has been [deprecated](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/strike). — Federico klez Culloca, Oct 10 '18 at 09:51
Move your `master_list` outside your `display()` function as a global variable. RIght now you are resetting your list every time, which explains why only an array with one entry is stored inside your `localStorage`. — somethinghere, Oct 10 '18 at 09:56
declare your master_list as a global variable and outside the display function. — HuntsMan, Oct 10 '18 at 09:57
Don't declare a global variable..global variables should be avoided. Instead of newing up your array you need to load it from [local storage `var retrievedObject = localStorage.getItem('master_list);`](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Liam, Oct 10 '18 at 09:59
Also see [How do I remove a particular element from an array in JavaScript?](https://stackoverflow.com/questions/5767325/how-do-i-remove-a-particular-element-from-an-array-in-javascript) if you put these two questions together it should give you everything you need to fix this — Liam, Oct 10 '18 at 10:02
please avoid global variables, especially if you don't set them to undefined or null so that they will be garbage collected. if you always update a global variable without nullifying it , it will definitely lead to memory leak — 0.sh, Oct 10 '18 at 10:28

score 2 · Answer 1 · edited Oct 10 '18 at 11:01

You have to check if master_list item already exists in localStorage using localStorage.getItem ( it will acutally return null if there the requested item does not exists)

const storeData= master_list => {
    let item = localStorage.getItem("master_list");
    if ( ! item ) {
        localStorage.setItem("master_list", master_list);
        return;
    }
    item = JSON.parse("master_list");
    item.concat(master_list); // or master_list.concat(item) depending on your needs
    localStorage.setItem("master_list", item);
};

Appending values in to a new array using JS

1 Answers1