Как сделать так, чтобы при добавлении карточек в корзину все они сохранялись, а не только последняя?
Для добавления нового значения в массив, который находится в local storage, не заменяя его последним, можно выполнить следующие шаги:
1. Получить текущий массив из local storage.
2. Добавить новое значение в этот массив.
3. Сохранить обновленный массив обратно в local storage.
Пример кода:
```javascript
// Получаем текущий массив из local storage
let currentArray = JSON.parse(localStorage.getItem('myArray')) || [];
// Добавляем новое значение в массив
currentArray.push('новое значение');
// Сохраняем обновленный массив обратно в local storage
localStorage.setItem('myArray', JSON.stringify(currentArray));
```
Чтобы сохранить все карточки при добавлении их в корзину, а не только последнюю, необходимо при каждом действии добавления карточки в корзину выполнять вышеописанные шаги. Таким образом, каждая карточка будет добавляться в массив в local storage, а не заменять его предыдущее значение.
В первом куске кода замените <br/> <pre><code class="javascript">const productInfoStorage = localStorage.setItem('productInfo', JSON.stringify([cartCardHTML]))</code></pre> <br/> на <br/> <pre><code class="javascript">const alreadyInStorage = JSON.parse(localStorage.getItem('productInfo'));
const productInfoStorage = localStorage.setItem('productInfo', JSON.stringify([...alreadyInStorage, cartCardHTML]))</code></pre> <br/> Иначе вы всегда в productInfo пишете массив с одним элементом
<blockquote>Как сделать так, чтобы в массив, который находится в local storage записывалось новое значение, а не заменялось на последнее?<br/>
</blockquote> <br/> <blockquote>Этот код находится на главной странице, откуда берутся данные</blockquote> <br/> <pre><code class="javascript">let products = localStorage.getItem('productInfo');
products = products ? JSON.parse(products) : [];
products.push(cartCardHTML);
localStorage.setItem('productInfo', JSON.stringify(products));</code></pre> <br/> <blockquote>Этот код находится на странице с корзиной</blockquote> <br/> <pre><code class="javascript">const cartCardBox = document.querySelector('.cart-card-box');
const cartNothingTitle = document.querySelector('.basket-clear-title');
if (localStorage.length > 0) {
cartNothingTitle.style.cssText = "position: absolute; opacity: 0; pointer-events: none;";
const products = JSON.parse(localStorage.getItem('productInfo')) ?? [];
products.forEach((product) => {
cartCardBox.insertAdjacentHTML('beforeend', product);
});
}</code></pre>