Как в localStorage правильно записывать значения?

Question

[Awake]

Есть страница, где содержится товар и кнопка "добавить в корзину". При нажатии на кнопку, ID-товара (взятый из БД) записывается в localStorage. Проблема в том, что я не пойму, как правильно реализовать key для записи в него value(которое соответствует ID'шнику товара). В JS-файле, я обозначил keyName как 'products'. И теперь, при добавлении значения, ему присваивается постоянно ключ products. Т.е. добавляю, к примеру, товар с ID = 1. Получаю в lS "products" со значением "1". Добавляю товар с ID = 2, значение "products" в lS перезаписывается с "1" на "2" и т.п.

Вот код от страницы с продуктом:

<h1><i><?=Html::encode($product->product_name)?></i></h1>
<p><img src="https://i.blogs.es/96715c/screenshot_5596/450_1000.jpeg" alt="Sony PlayStation 5" style="width:350px; height:290px" class="leftimg"></p>

<fieldset>
    <legend><b> Описание продукта </b></legend>
    <p><?=Html::encode($product->info)?></p>
</fieldset>

<button class="k"><a class="product_link_id" data-id="<?php echo $product->ID?>">Купить</a></button>
/*
<script>
    const btn = document.querySelector('.k > a');
    btn.addEventListener('click', function () {
        btn.innerHTML = 'Уже в корзине'
    });
</script>
*/
<?=Html::encode($product->product_price)?> рублей.

А вот код JS скрипта добавления товара в localStorage:

let count = {

};

this.keyName = 'products';

// Получаю ID'шник кнопки.
document.querySelector('.product_link_id').onclick = () => {
    getItemId(event.target.dataset.id);
};

// Убираю object Object из localStorage
localStorage.setItem(this.keyName, JSON.stringify(count));
const di = localStorage.getItem(this.keyName);
id = JSON.parse(di);

// Добавление товара в корзину
const getItemId = id => {
    count[id]++;
    console.log(localStorage.setItem(this.keyName, id));
};

Я так понимаю, это из-за того, что 'keyName' у меня просто статистически забит как 'products'. Но вот как сделать это по-другому, я не особо шарю.

Answer 1

[Антон Шаманов]

localStorage.setItem(this.keyName, JSON.stringify(count));
const di = localStorage.getItem(this.keyName);
id = JSON.parse(di);

ты понимаешь что твой код делает?

Comments

[Awake]

Не профиссеональным языком, но понимаю. + Сверху есть коммент, что я делал конкретно.
Без этой строчки, у меня в localStorage, при добавлении товара, выводило [object Object]. Соответственно, здесь я, с помощью JSON'а, избавляюсь от этого [object Object], добавляя и присваивая новым переменным старые значения lS. Да, возможно, можно было это уместить и в одну строчку, но как умею)

[Антон Шаманов]

Awake, с сохранением данных как раз все ок, а вот извлечением - нет: ты сохранил json объект, а извлекаешь вместо него id, это наводит на мысль, что ты не понимаешь что делаешь

[Awake]

Антон Шаманов, ну, честно говоря, есть такое :D
Я уже подправил код, вприцнипе, все сохраняется, как и хотел. Однако, теперь в lS можно добавлять одинаковые значения бесконечность раз. Отныне, пытаюсь создать функцию для отслеживания одинаковых значений в lS.
Спасибо за помощь!

[Антон Шаманов]

Awake, используй id как ключ массива...

[Антон Шаманов]

Антон Шаманов, если добавляемый id есть в базе, то в зависимости от логики товар либо должен суммироваться с имеющимся, либо заменить имеющийся

[Awake]

Антон Шаманов, кажется понял)
Спасибо огромное)

Upd: а как закрыть вопрос или отметить его как решённый?)

[Антон Шаманов]

Awake, добавь свой ответ или выбери мой и нажми "Отметить решением"