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. — Federico klez Culloca
– Federico klez Culloca, Commented Oct 10, 2018 at 9: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
– somethinghere, Commented Oct 10, 2018 at 9:56
declare your master_list as a global variable and outside the display function. — HuntsMan
– HuntsMan, Commented Oct 10, 2018 at 9: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); — Liam
– Liam, Commented Oct 10, 2018 at 9:59
Also see 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
– Liam, Commented Oct 10, 2018 at 10:02

georg · Accepted Answer · 2018-10-10 11:01:09Z

2

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);
};

edited Oct 10, 2018 at 11:01

georg

216k57 gold badges324 silver badges401 bronze badges

answered Oct 10, 2018 at 10:12

0.sh

2,79222 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Appending values in to a new array using JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related