如何在购物页面上显示购物车页面上的商品

Question

我希望当我点击购物页面上的添加到购物车时，它会在购物车页面上显示其详细信息，即使我刷新也无法删除，除非我点击删除。 产品来自json文件

<!-- shopping HTML -->
<div class="col-md-3">
                <div class="items">
                    <div class='photo'>
                        <img src="${item.imagelink}">
                    </div>
                    <div class="info">
                        <h5>${item.name}</h5>
                        <h5>$${item.price}</h5>
                    </div>
                    <div class="add">
                    <button class="btn btn-primary add">Add to cart</button>
                    </div>
                </div>
            </div>

<!--Cart HTML  -->
<div class="product-image">
                <img src="${item.imagelink}">
            </div>
            <div class="product-name">
                <div class="product-title">${item.name}</div>
            </div>
            <div class="product-price">$${item.price}</div>
            <div class="product-quantity">
                <input type="number" value="1" min="1">
            </div>
            <div class="product-line-price">45.99</div>

//when add to cart is clicked
$('button.add').click(function () {
        let output = '';
        output += `

            <div class="product-image">
                <img src="${item.imagelink}">
            </div>
            <div class="product-name">
                <div class="product-title">${item.name}</div>
            </div>
            <div class="product-price">$${item.price}</div>
            <div class="product-quantity">
                <input type="number" value="1" min="1">
            </div>
            <div class="product-line-price">45.99</div>
        `;
        $('.product').html(output);
    });