Использование localstorage для корзины покупок не работает

Question

Я делаю корзину для фотографий, поэтому, когда кто-то нажимает «добавить в корзину», источник, имя и цена фотографии добавляются в массив, хранящийся в localstorage, и когда корзина загружается, он извлекает массивы и использует insertAdjacent HTML, чтобы добавить их в корзину, однако мой код не работает. Может ли кто-нибудь помочь?

JAVASCRIPT

var cartItemsSrc = []
var cartItemsAlt = []
var cartItemsPrice = []
var srcOfImg = document.getElementById("img").src
var altOfImg = document.getElementById("img").alt
var priceOfImg = document.getElementById("img").dataset.price
var i

function addToCart() {
  cartItemsSrc.push(srcOfImg)
  cartItemsAlt.push(altOfImg)
  cartItemsPrice.push(priceOfImg)
  localStorage.setItem("cartItemsSrc", JSON.stringify(cartItemsSrc))
  localStorage.setItem("cartItemsAlt", JSON.stringify(cartItemsAlt))
  localStorage.setItem("cartItemsPrice", JSON.stringify(cartItemsPrice))
}

/* For the cart page (this is a different HTML file) */

var cartItemsSrc = localStorage.getItem("cartItemsSrc")
var cartItemsAlt = localStorage.getItem("cartItemsAlt")
var cartItemsPrice = localStorage.getItem("cartItemsPrice")
var cartBody = document.getElementById("cart-body")

window.onload = function() {
  if (cartItemsAlt.length > 0) {
  for (i = 0; i < cartItemsAlt; i++) {
      createItem(cartItemsAlt[i], cartItemsSrc[i], cartItemsPrice[i])
    } 
  } else {
      showEmptyCartMsg()
    }
}

function createItem(alt, src, price) {
  cartBody.insertAdjacentHTML(`<tr><td><img src="${src}"></td><td>${alt}</td><td>${price}</td></tr>`)
}

HTML

Answer 1

это проблема.

localStorage.setItem("cartItemsPrice", JSON.stringify(cartItemsPrice));

вы конвертируете en JSON, это String, нет Object o Array, только отсутствует convet

var cartItemsPrice = localStorage.getItem("cartItemsPrice");
//replace
var cartItemsPrice = JSON.parse(localStorage.getItem("cartItemsPrice"));

локальный элементы хранилища могут быть пустыми или недопустимыми json строка, поэтому с ней можно работать:

var cartItemsPrice;
try {
   cartItemsPrice = JSON.parse(localStorage.getItem("cartItemsPrice")
} catch (err) {
   cartItemsPrice = [];
}
...