Возможность сохранять элементы в браузере — полезный навык для веб-разработки, для таких вещей, как корзины, списки и многое другое.
Чтобы установить элементы локального хранилища, их необходимо преобразовать в строку, этого можно добиться с помощью:
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 с помощью метода карты, который возвращает буквальные тики с переменными, хранящимися в $ {}, это очень быстро.
Комбинируя карту локального хранилища и еще несколько фрагментов, вы можете легко создать пример добавления в корзину. Вот полный код: