JavaScript Работа с LocalStorage (Приложение)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM управление элементами</title>
<script src="/app.js" defer></script>
<style>
body{
background-color: #435187;
display: flex;
align-items: center;
justify-content: center;
}
h2{
text-align: center;
}
.wrapper{
background-color: #fff;
margin-top: 20%;
}
.items-list li{
line-height: 1.5;
list-style-type: none;
text-align: left;
margin:0;
padding:0;
}
input {
margin: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<h2>Создай свою пиццу</h2>
<p></p>
<ul class="items-list">
<li>Загружаем ингридиенты</li>
</ul>
<form class="add-items-form">
<input type="text" name="item" placeholder="Название..." autocomplete="off" required>
<input type="submit" value="+ Добавить ингридиент">
</form>
</div>
<script>
const addItemsForm = document.querySelector('.add-items-form');
const itemsList = document.querySelector('.items-list');
const items = JSON.parse(localStorage.getItem('items')) || []; // Получаем значение из localStorage в массив
// Добавление нового элемента
function addItem(e){
e.preventDefault();
// console.log(e.target.item.value);
const text = e.target.item.value;
const item = {
text: text,
checked: false
}
items.push(item); // Добавляем в массив
// Добавление информации в localStorage (ключ, значение) в строчном формате
localStorage.setItem('items', JSON.stringify(items));
displayItems(items, itemsList); // Отображаем на старнице
this.reset(); // Сброс полей формы без перезагрузки страницы
}
function displayItems(ingredients, ingredientsList){
ingredientsList.innerHTML = ingredients.map((ingredient, index) => {
return `
<li>
<input type='checkbox' id=item${index} data-index='${index}' ${ingredient.checked ? 'checked' : ''}/>
<label for='item${index}'>${ingredient.text}</label>
</li>
`;
}).join('');
}
function toggleClick(e){
if (!e.target.matches('input')) return; // Работаем только с выборкой, содержащей Input
const element = e.target.dataset.index; // Получаем доступ к data-index
items[element].checked = !items[element].checked; // Меняем значение элемента массива по индексу
localStorage.setItem('items', JSON.stringify(items)); // Записываем изменения
displayItems(items, itemsList); // Отображаем на старнице
}
addItemsForm.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleClick);
displayItems(items, itemsList); // Отображаем массив при старте страницы
</script>
</body>
</html>
Комментарии
Отправить комментарий