Добавление значений в новый массив с использованием JS

Я пытаюсь создать форму (больше для личного обучения), используя HTML, JS и локальное хранилище, чтобы:

  1. Принимать входные данные от пользователя
  2. Показать входные данные от пользователя
  3. Храните данные в локальном хранилище
  4. Дайте возможность пользователю прорваться сквозь предмет или пробить все

Вопросы:

  • Локальное хранилище всегда хранит последнее введенное значение, а не весь массив. По какой-то причине массив push не добавляет все значения. Что мне не хватает?
  • Забастовка работает для всех сразу, но не для каждого варианта. Какой способ это сделать для каждого варианта? 

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>

Источник

1 ответ

Вы должны проверить, если master_list элемент уже существует в localStorage с помощью localStorage.getItem (он будет возвращать null, если запрошенный элемент не существует)

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);
};
Источник
Другие вопросы по тегам