即使刷新页面，如何使我的购物车项目仍然存在？

Question

我的购物车是用 JavaScript 制作的。一切正常，但当我刷新页面时却不行，那么我所需要的只是一种方法，即使在我刷新页面时也能保存项目并且不会丢失它们。

如果可以，我可以使用localStorge 吗？或者我应该为此使用mysql，如果是的话，如何使用？

您不必查看我的所有代码，我只需要一种方法来使这件事成为可能。

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

function ready() {

    $(".CheckOutButton").hide();
    var removeBtns = document.getElementsByClassName('cartRemovingBtn')
    for(var i=0; i<removeBtns.length;i++) {
        var removeButton = removeBtns[i]
        removeButton.addEventListener('click' , removeCartItem)
    }

    var addToCartBtns = document.getElementsByClassName('addToCartBtn')
    for(var i=0; i<addToCartBtns.length;i++) {
        var addToCartbtn = addToCartBtns[i]
        addToCartbtn.addEventListener('click' , addToCartClicked)

    }

}

function addToCartClicked(event) {
    var btn = event.target
    var shopItem = btn.parentElement
    var title = shopItem.getElementsByClassName('title')[0].innerText
    var price = shopItem.getElementsByClassName('price')[0].innerText
    var imgSrc = shopItem.getElementsByClassName('Fortnite-Packs-Img')[0].src
    addItemToCart(title, price, imgSrc)
    updateCartTotal()
}

function addItemToCart(title, price, imgSrc) {

    var item = document.createElement('div')
    var cartItems = document.getElementsByClassName('shopping-cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('item-name')
    console.log(cartItemNames)
    for(var i = 0; i<cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert("This item already been added to cart.")
            return
        }
    }
    var cartItemLayout = `
        <div>
        <li class="itemInCart">
            <img class="item-img" src="${imgSrc}" alt="item1" />
            <span class="item-name">${title}</span>
            <span class="item-price">${price}</span>
            <span class="item-quantityword">Quantity: <span class="item-quantity item-quantityword">1</span></span>
            <button class="cartRemovingBtn"><span class="cartRemovingBtntxt">X</span></button>
            </li>
        </div>`
    item.innerHTML = cartItemLayout;
    cartItems.append(item)
    item.getElementsByClassName('cartRemovingBtn')[0].addEventListener('click', removeCartItem)

}


function removeCartItem(event) {
    // what ever button clicked on..
    var removeButtonClicked = event.target
    removeButtonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}


function updateCartTotal() {
    var shoppingCartItems = document.getElementsByClassName('shopping-cart-items')[0]
    var cartItems = shoppingCartItems.getElementsByClassName('itemInCart')
    var itemsCount = cartItems.length
    var total = 0
    for(var i=0; i<cartItems.length;i++) {
        var cartItem = cartItems[i]
        var itemPrice = cartItem.getElementsByClassName('item-price')[0]
        var itemQty = cartItem.getElementsByClassName('item-quantity')[0]
        var price = parseFloat(itemPrice.innerText.replace('$', ''))
        var qty = itemQty.innerText

        total = (total + (price * qty)) *100 / 100 
    }
    document.getElementsByClassName('badge')[0].innerText = itemsCount
    document.getElementsByClassName('badge')[1].innerText = itemsCount
    document.getElementsByClassName('total-price')[0].innerText = '$' + total
    if (total > 0) {
        $(".CheckOutButton").show();
    } else {
        $(".CheckOutButton").hide();
    }

}

Answer 1

您可以使用浏览器history的pushState和state。

let myCart = {};
function onLoad() {
  // set cart from state after load
  myCart = history.state || {};
}

function onCartChanged(updatedCart) {
  // push state in history whenever cart is changed
  history.pushState(updatedCart, 'cart');
}

通过以上方式，您可以在刷新时获取当前购物车，也可以通过浏览器返回到上一个购物车。