how to store multiple data in local storage of the browser

Question

I wanna store multiple data when Add to Cart is clicked by the user in Local Storage Python Flask Code

{% for data in product_data %}
                    <div class="shop-item" >
                        <span class="shop-item-title" id="title-item">{{ data.title }}</span>
                        <input type="image" class="shop-item-image" id="image-item" src={{ data["img_file"] }} onclick="takethatpage();">
                        <div class="shop-item-details">
                            <span class="shop-item-price" id="price-item">{{ data["price"]}}</span>
                            <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                        </div>
                    </div>
                {% endfor %} 

JS code

function addToCartClicked(event)
{
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
    var imgSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
    console.log(imgSrc)
    addItemToCart(title,price,imgSrc)
}
function addItemToCart(title,price,imgSrc)
{

}

Answer 1

function addItemToCart(title,price,imgSrc) {
    let json = localStorage.getItem('card');
    if (!json) {
        card = [];
    } else {
        card = JSON.parse(json);
    }
    const item = {title.title,price:price,imgSrc:imgSrc};
    card.push(item);
    localStorage.setItem('card', JSON.stringify(card, null, 2));
}