Local Storage. Не сохраняется выведенный список <li> после перезагрузки страницы

Рейтинг: -1Ответов: 1Опубликовано: 22.02.2025

Значение инпута добавляется в список li и выводится на экран по событию клика. Пушу значение инпута в массив и указываю массив в local storage, но при перезагрузке экрана все li исчезают. Как сделать, что бы при перезагрузке страницы весь список оставался на экране? Смотрел ролики и читал статьи, но всё равно не понимаю как это сделать.

html
    <body style="background-color: rgb(20, 20, 20); color: white;">
        <div id="form" class="row m-5 d-md-flex">
            <div class="col-2 form__inp">
                <input class="form-control" type="text"  placeholder="First name" aria-label="First name">
            </div>
            <div class="col-1 p-0">
                <button class="btn btn-primary">Нажать</button>
            </div>
            <ul class="form__list" style="height: 100px;"></ul>
        </div>
        <script src="localStorage.js" defer></script>
    </body>

JavaScript
        //Создаем массив для сохранения данных
    
    const arr= [];
    
    const funcArr = (a) => {
        a.push(document.querySelector('.form-control').value)
        console.log(a);
        return a;
    }
    
    //Создание li
    function createShowList() {
        let list = document.createElement('li');
        document.querySelector('.form__list').append(list);
        list.innerHTML = document.querySelector('.form-control').value;
        document.querySelector('.form-control').value = '';
        return list;
    };
    
    //Создание кнопки 
    
        function createBtnDelete(li) {   
            let btnDelete = document.createElement('button')
            btnDelete.innerHTML = 'Удалить'
            btnDelete.classList.add('remove-btn')
            btnDelete.style.marginLeft = '15px'
            li.append(btnDelete)
            //Удаление Li
            btnDelete.addEventListener('click', () => {
                return li.remove()
            });
            
        };
        
        document.querySelector('.btn-primary').addEventListener('click', () => {    
            funcArr(arr);
            createBtnDelete(createShowList());
            funcLocalStorage2(arr)  
        });
        
    //Хранилище
        const funcLocalStorage2 = (arr) => {
            localStorage.setItem('a', JSON.stringify(arr));
            let res = localStorage.getItem('a');
            JSON.parse(res);
        };
javascript localstorage
Источник: Stack Overflow на русском

Ответы

▲ 0

Тут надо думать от обратного, что у вас уже есть элементы списка, и добавлять их при начальной загрузке.

const arr = JSON.parse(localStorage.getItem("a")) || []; // Загружаем сохранённые данные если они есть

document.addEventListener("DOMContentLoaded", () => {
  arr.forEach(item => addListItem(item)); // Отображаем сохранённые элементы при загрузке
});

document.querySelector(".btn-primary").addEventListener("click", () => {
  const inputValue = document.querySelector(".form-control").value.trim();
  if (inputValue === "") return; // Игнорируем пустой ввод

  arr.push(inputValue);
  localStorage.setItem("a", JSON.stringify(arr));

  addListItem(inputValue);
  document.querySelector(".form-control").value = ""; // Очищаем поле ввода
});

// Функция создания элемента списка
function addListItem(value) {
  let list = document.createElement("li");
  list.textContent = value;

  createBtnDelete(list, value);
  document.querySelector(".form__list").append(list);
}

// Функция создания кнопки удаления
function createBtnDelete(li, value) {
  let btnDelete = document.createElement("button");
  btnDelete.textContent = "Удалить";
  btnDelete.classList.add("remove-btn");
  btnDelete.style.marginLeft = "15px";

  li.append(btnDelete);

  btnDelete.addEventListener("click", () => {
    const index = arr.indexOf(value);
    if (index > -1) {
      arr.splice(index, 1); // Удаляем элемент из массива
      localStorage.setItem("a", JSON.stringify(arr)); // Обновляем localStorage
    }
    li.remove(); // Удаляем элемент из DOM
  });
}
<div id="form" class="row m-5 d-md-flex">
  <div class="col-2 form__inp">
    <input
      class="form-control"
      type="text"
      placeholder="First name"
      aria-label="First name"
    />
  </div>
  <div class="col-1 p-0">
    <button class="btn btn-primary">Нажать</button>
  </div>
  <ul class="form__list" style="height: 100px"></ul>
</div>

Код можно ещё оптимизировать... тут много чего можно улучшить. PS Приучайте себя нормально называть функции и классы, иначе получите от коллег выговор.