Блог

Я создаю веб-сайт электронной коммерции и сталкиваюсь с проблемой в части корзины покупок.

Я определил свою корзину покупок как массив. Когда пользователь нажимает кнопку AddToCart, он сохраняет этот элемент < div> элемента в массиве. Я хочу сохранить этот массив в локальном хранилище или в любом хранилище. Это то, что у меня есть сейчас.

 <script>
    function check() {
      console.log(shoppingCart);
      localStorage.setItem("shoppingCart", JSON.stringify(shoppingCart));
      items = JSON.stringify(localStorage.getItem("users"));
      console.log(localStorage);
    }
  </script>
 

Моя вкладка консоли Firefox выдает мне это, когда я добавил два элемента.

 Array [ div.item, div.item]                      products.html:88:15
Storage { shoppingCart: "[{},{}]", length: 1 }   products.html:91:15
 

Итак, в локальное хранилище были добавлены два элемента. Но вместо массива элементов < div > он выдает массив пустых объектов.

Мой вопрос в том, как мне добавить массив элементов html < div> в локальное хранилище (или любое другое хранилище), чтобы мой список покупок оставался после перезагрузки веб-страницы.

Спасибо, что прочитали мой вопрос, надеюсь, вы поняли мою проблему.

Я бы вообще не стал хранить div элементы, поскольку люди не будут покупать div у вас элементы, и нет причин раздувать localStorage содержимое данных и пользовательского интерфейса. Вместо этого сохраните данные, которые содержат эти элементы, а позже, когда вам нужно будет извлечь эти данные из хранилища, вы можете создать div элементы (или любой пользовательский интерфейс), чтобы сохранить их для отображения на странице.

Вот пример, который показывает, почему лучше не сохранять презентацию с данными. Я покажу вам, что я могу создать две разные презентации из одного набора данных (это не будет работать здесь, в среде snippet переполнения стека, но это будет здесь, в этой скрипке):

 let cart = [];
const list = document.querySelector("select");
document.querySelector("button").addEventListener("click", function(){
  cart.push(list.value); // Update the cart
  localStorage.setItem("cart", JSON.stringify(cart)); // store cart
  console.log(localStorage.getItem("cart"));
});

document.querySelector("#show").addEventListener("click", function(){
  // Presentation #1

  // Loop over all the items in the array that is created by
  // converting the JSON in local storage to an array
  JSON.parse(localStorage.getItem("cart")).forEach(function(item){
    let row = document.createElement("div"); // make a div for the item
    row.textContent = item; // populate the div
    document.body.appendChild(row); // Put item in doc.
  });
  
  
  // Presentation #2

  // Same data and same technique to access it
  
  let tbl = document.createElement("table");
  
  JSON.parse(localStorage.getItem("cart")).forEach(function(item){
    // But different presentation
    let row = document.createElement("tr"); 
    let cell = document.createElement("td");
    cell.textContent = item; // populate the div
    row.appendChild(cell);
    tbl.appendChild(row);
  });  
  
  document.body.appendChild(tbl); // Put item in doc.
  
}); 

 table, td {
  border:1px solid grey;
  border-collapse:collapse;
} 

 <select>
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
  <option>Item 4</option>
  <option>Item 5</option>
  <option>Item 6</option>  
</select>
<button>Add to cart</button>
<button id="show">Show Cart</button>