当购物车位于单独的html页面时，如何才能让javascript 'add‘函数工作呢？不确定如何将本地存储应用于我的代码

Question

(新加入JavaScript)

在youtube教程(https://www.youtube.com/watch?v=YeFzkC2awTM)的帮助下，我为我的网站创建了一个定制购物车。

当添加到购物车中的项目与购物车/签出在同一个页面上时，它们将成功地在签出总数中进行汇总。但是，我希望购物车在一个单独的HTML页面上的项目，以便当用户完成添加项目到购物车，他们可以导航到那里，以查看他们的全部和完整的签出。

但是当我将项目放在单独的HTML页面并将它们添加到购物车中时，购物车就不再更新了。我认为问题是因为我没有指定任何存储，所以当我导航到购物车时页面被刷新，存储的变量丢失(?)

我不知道如何用我创建的代码实现本地存储。

任何帮助都非常感谢！

项目的HTML代码页：

      <div class="ticket-name">EARLY BIRD</div>
         <div class="ticket-details">
            <span class="ticket-price">€20.99</span>
            <button class="btn ticket-button" type="button">ADD TO CART</button>
         </div>
      </div>

购物车页的HTML代码：

                        <div class="cart-row">
                            <span class="cart-item cart-header cart-column">ITEM</span>
                            <span class="cart-price cart-header cart-column">PRICE</span>
                            <span class="cart-quantity cart-header cart-column">QUANTITY</span>
                        </div>

                        <!-- HTML5 div tag for the items in the cart -->
                        <!-- This div will be populated with HTML using JavaScript -->
                        <div class="cart-items">

                        </div>

                        <!-- HTML5 div tag for the total for items in the cart -->
                        <div class="cart-total">
                            <strong class="cart-total-title">Total</strong>
                            <span class="cart-total-price">€0</span>
                        </div>

                        <!-- HTML5 button to purchase items -->
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">

                            <input type="hidden" name="cmd" value="_xclick">
                            <input type="hidden" name="business" value="weblectricvirtualfestival@gmail.com">
                            <input type="hidden" name="lc" value="US">
                            <input type="hidden" name="item_name" value="Festival Tickets">
                            <input id="paypal-price" type="hidden" name="amount" value="0.01">
                            <input type="hidden" name="currency_code" value="EUR">
                            <input type="hidden" name="button_subtype" value="services">
                            <input type="hidden" name="no_note" value="0">
                            <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
                            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif"
                                name="submit" alt="PayPal - The safer, easier way to pay online!">
                            <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

                        </form>

                    </div>

购物车的JS代码：

    if (document.readyState == 'loading') {
            document.addEventListener('DOMContentLoaded', ready)
        } else {
            ready()
        }

        function ready() {

            var removeCartItemButtons = document.getElementsByClassName('btn-danger')
            for (var i = 0; i < removeCartItemButtons.length; i++) {
                var button = removeCartItemButtons[i]
                button.addEventListener('click', removeCartItem)
            }

            var quantityInputs = document.getElementsByClassName('cart-quantity-input')
            for (var i = 0; i < quantityInputs.length; i++) {
                var input = quantityInputs[i]
                input.addEventListener('change', quantityChanged)
            }

            var addToCartButtons = document.getElementsByClassName('ticket-button')
            for (var i = 0; i < addToCartButtons.length; i++) {
                var button = addToCartButtons[i]
                button.addEventListener('click', addToCartClicked)
            }
        }

        function removeCartItem(event) {
            var buttonClicked = event.target
            buttonClicked.parentElement.parentElement.remove()
            updateCartTotal()
        }

        function quantityChanged(event) {
            var input = event.target
            if (isNaN(input.value) || input.value <= 0) {
                input.value = 1
            }
            updateCartTotal()
        }

        function addToCartClicked(event) {
            var button = event.target
            var shopItem = button.parentElement.parentElement
            var title = shopItem.getElementsByClassName('ticket-name')[0].innerText
            var price = shopItem.getElementsByClassName('ticket-price')[0].innerText
            addItemToCart(title, price)
            updateCartTotal()
        }

        function addItemToCart(title, price) {
            var cartRow = document.createElement('div')
            cartRow.classList.add('cart-row')
            var cartItems = document.getElementsByClassName('cart-items')[0]
            var cartItemNames = cartItems.getElementsByClassName('cart-item-title')

            for (var i = 0; i < cartItemNames.length; i++) {
                if (cartItemNames[i].innerText == title) {
                    alert('This item is already added to the cart')
                    return
                }
            }

            var cartRowContents = `
                <div class="cart-item cart-column">
                    <span class="cart-item-title">${title}</span>
                </div>
                <span class="cart-price cart-column">${price}</span>
                <div class="cart-quantity cart-column">
                    <input class="cart-quantity-input" type="number" value="1">
                    <button class="btn btn-danger" type="button">REMOVE</button>
                </div>`

            cartRow.innerHTML = cartRowContents
            cartItems.append(cartRow)
            cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
            cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
        }

        function updateCartTotal() {
            var cartItemContainer = document.getElementsByClassName('cart-items')[0]
            var cartRows = cartItemContainer.getElementsByClassName('cart-row')
            var total = 0

            for (var i = 0; i < cartRows.length; i++) {
                var cartRow = cartRows[i]
                var priceElement = cartRow.getElementsByClassName('cart-price')[0]
                var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
                var price = parseFloat(priceElement.innerText.replace('€', '')) 
                var quantity = quantityElement.value
                total = total + (price * quantity)
            }

            total = Math.round(total * 100) / 100

            document.getElementById("paypal-price").value = total;

            document.getElementsByClassName('cart-total-price')[0].innerText = '€' + total
        }

Answer 1

你有超过一页的吗？

变量和数组数据不能通过js直接传递到其他html。

1. 它应该是后端作业。

1. ，如果你试图学习前端，你可以使用useContext来做出反应。单页系统…看一看。

1. 使用css显示:无，创建假页面.

点击一个按钮，A部分显示无，b部分显示块。

我认为方法3对新的更容易。