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

我的购物车是用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();
    }

}

如果（document.readyState=='loading'）{
document.addEventListener（'DOMContentLoaded'，ready）
}否则{
就绪（）
}
函数就绪（）{
$（“.checkBurtton”）.hide（）；
var removeBtns=document.getElementsByClassName（'cartRemovingBtn'）
对于（var i=0；i，您可以使用浏览器的和

让myCart={}；
函数onLoad（）{
//从装载后的状态设置购物车
myCart=history.state | |{}；
}
函数onCartChanged（updatedCart）{
//每次更改购物车时，历史记录中的推送状态
history.pushState（updatedCart，'cart'）；
}

使用以上内容，您可以在刷新时获取当前购物车，也可以使用浏览器返回上一个购物车。
使用localStorage或Cookie。我更喜欢。是的，可以使用inspect更改它们，但用户应该已经在更改购物车中的内容。由于Cookie和localStorage是客户端的，因此它们可以被篡改。您可以可能想考虑一个服务器端的解决方案，比如数据库。这能回答你的问题吗？如果尝试使用LoalStor，但我真的不知道它将如何在我的购物车上使用，因为当有人点击“添加到购物车”按钮时，这将调用一个功能，即购物车项目的内部HTML在这里，在这里我应该放置LoalStistOGSET。如果我在函数外部通过localStorge.getItem获取项目，然后将其设置为等于innerHTML，那么innerHTML将不被定义，因为它在函数外部。嘿，在我的项目中，我应该把这些放在哪里？你能更具体一点吗？谢谢。从你给定的代码中，我认为onLoad将转到您的
ready
函数，onCartChanged将转到
updateSave
。您正在尝试将html存储在本地存储中，保存（推送）你的cartItems数组将改为历史记录。ohmygod更新本不应该出现在我的代码中我正在尝试localStorge，但它不起作用。我现在编辑了代码。你能再次检查吗？thanksonCartChanged将转到你的updateCartTotal，我确定。根据你存储的内容，比如cartItems。你将在ready（）中获得它在使用history.state加载页面时，需要从中重新创建html。