как сделать, чтобы localStorage сохранял все значения?

Question

Ребят, помогите, я в js 2 недели. У меня проблема в том,что я когда написал свое приложение to do, и начал работу с localStorage. Так вот, я когда записываю допустим задание в input оно сохраняется - это хорошо, но, когда записываю следующее у меня предыдущее заменяется на, написанное мною, следующее задание. Не могу понять, как сделать правильно.

код HTML

<div id="myDiv" class="header">
        <h2>To Do App</h2>
        <input type="text" id="myInput" placeholder="Tittle">
        <span class="addBtn" onclick="newElement()" id="btn">Add</span>

        <ul id="myUl">

        </ul>
    </div>

код js

//переключаем класс checked на элементах li
let checked = document.querySelector('ul');
checked.addEventListener('click', function(ev){
    if(ev.target.tagName == 'LI'){
        ev.target.classList.toggle('checked');
    }
});

//фукция уоторая вставляет value из input в li
function newElement () {
    let myInput = document.getElementById('myInput').value;
    let li = document.createElement('li');
    let t = document.createTextNode(myInput);
    let myUl = document.getElementById('myUl');
    li.appendChild(t);
    if (myInput == ''){
        alert('поле не должно быть пустым');
    } else {
        myUl.appendChild(li);
        document.getElementById('myInput').value = '';
    }



    //работа с localStorage
    let todoList = [];
    let i = todoList.length;
    let temp = {};
    temp.todo = myInput;
    todoList[i] = temp;
    localStorage.setItem('todo', JSON.stringify(todoList));



//крестик в конце каждого li
    let myNodeList = document.getElementsByTagName('li');
    for (let i = 0; i < myNodeList.length; i++) {
        let span = document.createElement('span');
        let txt = document.createTextNode('\u00D7');
        span.className = 'close';
        span.appendChild(txt);
        myNodeList[i].appendChild(span);
    }

//скрываем элементы по нажатию на крестик
    let close = document.getElementsByClassName('close')
    for (let i = 0; i < close.length; i++) {
            close[i].onclick = function(){
            let div = this.parentElement;
            div.style.display = 'none';
        };
    }
}

Answer 1

let todoList = [];
if (localStorage.getItem('todo')) {
  todoList = JSON.parse(localStorage.getItem('todo'));
}

function newElement () {
  let myInput = document.getElementById('myInput').value;
  if (myInput == ''){
    alert('поле не должно быть пустым');
    return;
  }
  ...

    //работа с localStorage
    let temp = {};
    temp.todo = myInput;
    todoList.push(temp);
    localStorage.setItem('todo', JSON.stringify(todoList));

  ...
}

БЛОГ НА HUSL

как сделать, чтобы localStorage сохранял все значения?

Ответы (1 шт):