CODEWITHSUNDEEP
javascripthtmllocal-storage
Pratyush Tallapragada
Pratyush Tallapragada

Reputation: 49

Appending values in to a new array using JS

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

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

Questions:

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>

Upvotes: 1

Views: 55

Answers (1)

0.sh
0.sh

Reputation: 2752

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

Upvotes: 2

Related Questions