Local Storage. Не сохраняется выведенный список
Значение инпута добавляется в список 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);
};
Ответы (1 шт):
Автор решения: BlackStar1991
→ Ссылка
Тут надо думать от обратного, что у вас уже есть элементы списка, и добавлять их при начальной загрузке.
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 Приучайте себя нормально называть функции и классы, иначе получите от коллег выговор.