I am using Vanilla javascript to manipulate items in Cart . Whenever i want to delete an item i want to store it when I refresh the page , I didn't succeed using localStorage in this case :

function Cart()
{
for(let i = 0 ; i <addCart.length; i++ )
{
    addCart[i].addEventListener('click', (event)=>
    {
       const Target = event.target
       const titleTarget = Target.parentElement.parentElement.getElementsByTagName("h3")[0].innerText
       const priceTarget = Target.parentElement.parentElement.getElementsByTagName("span")[0].innerText
       const imageTarget = Target.parentElement.parentElement.getElementsByTagName("img")[0].src
        addToCart(titleTarget,priceTarget,imageTarget)
       console.log(titleTarget,priceTarget,imageTarget)
       addCart[i].parentElement.remove()

    })
}
    function addToCart(titleTarget,priceTarget,imageTarget)
    {
        var cartRow = document.createElement('div')
        cartRow.classList.add('grid-cart')
        var cartRowContent = `
                <img class="cart-image" src="${imageTarget}" alt="cart image" />
            <div class="grid-title">
                <h3 class="cart-title">${titleTarget}</h3>
                <h4 class="cart-title-size">Size 11</h4>
            </div>
                <h3 class="cart-price">${priceTarget}</h3>
        `
        cartRow.innerHTML = cartRowContent
        dropCart[0].append(cartRow)
    }
   
}
localStorage.setItem('cartsetting',Cart())
localStorage.getItem('cartsetting')

So this code describes , that I will click add to cart and it will be removed from the main page . And will be added in the cart , but everything get reset after I refresh ! any solution ?