Сохранение определенных элементов через localStorage

Question

Нужно сохранить черновик заказа в корзине, то есть, чтобы после обновления страницы, выхода из браузера и тд - при новом заходе на страницу заказ оставался неизменным. Немного не понимаю саму механику, логику, как это можно было бы сделать... Пытаюсь реализовать через localStorage и JSON, и этот простенький код:

window.addEventListener('unload', () => {

        const listCart = document.querySelectorAll('.oneStuffOfCartClass')
        localStorage.setItem('wholeCartList', JSON.stringify(listCart))

}, false)

window.addEventListener('DOMContentLoaded', () => {

        console.log('DOMContentLoaded')
        const list = localStorage.getItem('wholeCartList');
        console.log(list)
        const parsedList = JSON.parse(list);
        for ( let i = 0; i < parsedList.length; i++ ) {
             wholeCart.appendChild(parsedList[i])
        }

}, false)

Answer 1

Может кому то поможет :)

РЕШЕНИЕ:

Благодаря комментарию @doox911 - осознал в какую сторону двигаться:

Добавил в localStorage все данные из form, но товар в корзине, который тоже находился внутри тега form не сохранялся - это просто div с такими же вложенными элементами, поэтому нужно сохранять по другому... Поискав по сети, нашёл похожий вопрос: Сохранение элемента html в localStorage и вывод

Суть которого в этом действии:

const parsed = wholeCart.innerHTML
localStorage.setItem('parsedCart', parsed)

const cartGot = localStorage.getItem('parsedCart')
if (cartGot) {
   wholeCart.innerHTML = cartGot
}

Answer 2

Простой пример сохранения структуры в товара в localStorage:

const btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
  const products = [...document.querySelectorAll('.product')]
    .filter(node => node.querySelector('input').checked);

  const productToStorages = [];

  products.forEach(node => {
    productToStorages.push({
      id: node.dataset.productId,
      name: node.querySelector('.product__title').textContent.trim(),
      desc: node.querySelector('.product__desc').textContent.trim(),
    });
  });

  // Скопируй
  // localStorage.setItem('productToStorages', JSON.stringify(productToStorages));

  console.log('productToStorages is array:', productToStorages);
  console.log('productToStorages is JSON:', JSON.stringify(productToStorages));
});

.container {
  display: flex;
}

.product {
  margin: 5px;
  padding: 5px;
  border: 1px solid grey;
}

<div class="container">
  <div class="product" data-product-id="1">
    <div class="product__title">
      Товар 1
    </div>
    <div class="product__desc">
      Описание 1
    </div>
    <input type="checkbox" checked>
  </div>
  <div class="product" data-product-id="2">
    <div class="product__title">
      Товар 2
    </div>
    <div class="product__desc">
      Описание 2
    </div>
    <input type="checkbox">
  </div>
  <div class="product" data-product-id="3">
    <div class="product__title">
      Товар 3
    </div>
    <div class="product__desc">
      Описание 3
    </div>
    <input type="checkbox">
  </div>
</div>

<button id="btn">Сохранить на будущее..</button>

А в вашем случае надо при загрузке страницы вытащить из localStorage товары и если они есть подставить их в нужный товар.

БЛОГ НА HUSL

Сохранение определенных элементов через localStorage

Ответы (2 шт):