как сделать чтобы добавленные li сохранялись после обновление

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>To Do List</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>To Do List</h2>
            <input type="text" id="enter" placeholder="Заголовок...">
            <button class="addBtn">Добавить</button>
        </div>
        <hr>
        <ul id="list">
        </ul>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

const btn = document.querySelector('.addBtn');
const list = document.querySelector('#list');

list.addEventListener('click', (e) => {
      if(e.target.tagName === 'LI') {
         e.target.classList.toggle('checked')
      } else if (e.target.tagName === 'SPAN') {
         let div = e.target.parentNode;
      div.remove();
   }
});
const newElements = () => {
   let li = document.createElement('li');
   let input = document.querySelector('#enter').value;
   let t = document.createTextNode(input);
   li.appendChild(t);
   if(input == '') {
      alert('Чтобы что нибудь получить, нужно что нибудь набрать!');
   } else {
      list.appendChild(li);
   }
   document.querySelector('#enter').value = '';
   let span = document.createElement('SPAN');
   let txt = document.createTextNode('\u2716');
   span.className = 'close';
   span.appendChild(txt);
   li.appendChild(span);
}
btn.addEventListener('click', () => newElements());

задача сделать так чтобы li сохранялись после обновление странице

Answer 1

Создайте переменную которая будет сохранять объектное состояние li. И сохраните данную переменную, в

loacalStorage.setItem('myLis', JSON.stringify(myLis))

После обновления страницы забирайте значение объектного представления:

let lis = JSON.parse(localStorage.getItem('myLis') || [])

Парсить Li в Nodах уже стоит при переборе массива list

БЛОГ НА HUSL

как сделать чтобы добавленные li сохранялись после обновление

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