Как вывести список просмотренных товаров на чистом javascript

Рейтинг: 0Ответов: 2Опубликовано: 03.03.2023

Как вывести список просмотренных товаров на чистом javascript, без всяких там плагинов в CMS и прочего, чисто на js взять допустим статику, которая потом будет динамичная и чтобы потом после клика на каждый товар и выходя потом на главную, отображался список, какие статические товары были открыты, какие ваши идеи и ссылки где есть готовые варианты, сам гуглил

Ответы

▲ 0

// получаем список просмотренных товаров из sessionStorage или создаем пустой массив:
const viewedItems = JSON.parse(sessionStorage.getItem('viewedItems')) || [];

// добавляем id текущего товара в массив( если его там еще нет ):
const currentItemId = '1'; // здесь нужно будет использовать id товара
if (!viewedItems.includes(currentItemId)) {
  viewedItems.push(currentItemId);
}

// сохраняем обновленный список просмотренных товаров в sessionStorage:
sessionStorage.setItem('viewedItems', JSON.stringify(viewedItems));

// выводим список просмотренных товаров:
const viewedItemsList = document.getElementById('viewed-items-list');
viewedItemsList.innerHTML = '';
viewedItems.forEach(itemId => {
  const itemLink = document.createElement('a');
  itemLink.href = `/item/${itemId}`; // здесь нужно будет использовать ссылку на товар:
  itemLink.textContent = `Item ${itemId}`;
  viewedItemsList.appendChild(itemLink);
});
<!-- Кнопка для добавления товара в список просмотренных товаров -->
<button id="add-to-viewed">Добавить в список просмотренных</button>

<!-- Список просмотренных товаров -->
<ul id="viewed-list"></ul>

попробуй такой код

▲ 0

Тут прям решения ctrl+c ctrl+v , все же нет

Но есть варианты как решить

Документация по localStorage и sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Пример реализации списка просмотренных товаров с использованием localStorage: https://www.sitepoint.com/simple-javascript-utilities-for-handling-local-storage/

Пример реализации списка просмотренных товаров с использованием Handlebars.js: https://www.sitepoint.com/javascript-local-storage-handlebars-js/