Возможность сохранять элементы в браузере — полезный навык для веб-разработки, для таких вещей, как корзины, списки и многое другое.
Чтобы установить элементы локального хранилища, их необходимо преобразовать в строку, этого можно добиться с помощью:
localStorage.setItem('items', JSON.stringify(items));
setItem используется для установки элементов, которые вы хотите иметь в локальном хранилище.
Использование слова «элементы» для добавления имени локального хранилища.
Вышеупомянутое будет установлено при нажатии на добавление элемента списка.
При загрузке страницы мы можем получить элементы, которые находятся в локальном хранилище, или задать пустой массив. Используя
const items = JSON.parse(localStorage.getItem('items')) || [];
Нет, у нас есть наши элементы, мы можем вызвать функцию для их отображения, тогда они будут сохранены на странице, даже когда страница обновится.
Объединение этого в корзину покупок может быть достигнуто путем использования обратных тиков es6 для создания html из данных с использованием карты и innerHTML. Наряду с большим количеством кода. Вот один фрагмент кода, который я считаю действительно полезным для манипулирования данными.
shoppingArea.innerHTML = products
.map((product, i) => {
return `
<div class='shopping__product'>
<h3 class='shopping__product__title'>${product.title + ' ' + (i+1)}</h3>
<img class = 'shopping__product__img' src="${product.imgSrc}">
<p class='shopping__product__price'>${product.price}</p>
<button class='shopping__product__button'>Add to basket</button>
</div>
`;
}).join("");
Используя innerHTML, мы можем обновить dom с помощью метода карты, который возвращает буквальные тики с переменными, хранящимися в $ {}, это очень быстро.
Комбинируя карту локального хранилища и еще несколько фрагментов, вы можете легко создать пример добавления в корзину. Вот полный код:
