I want my items to remain in cart everytime i refresh the page

Question

Hello i have this code and i want to make alocal storage in cart so that everytime i refresh the page the items inside cart stay

        let openShopping = document.querySelector('.shopping-cart');
        let closeShopping = document.querySelector('.closeShopping');
        let list = document.querySelector('.products-list');
        let listCard = document.querySelector('.listCart');
        let body = document.querySelector('body');
        let total = document.querySelector('.total');
        let quantity = document.querySelector('.quantity');

        openShopping.addEventListener('click', ()=>{
            body.classList.add('active');
        })
        closeShopping.addEventListener('click', ()=>{
            body.classList.remove('active');
        })

        let products = [
            {
                id: 1,
                name: 'PRODUCT NAME 1',
                image: '',
                price: 120000
            },
            {
                id: 2,
                name: 'PRODUCT NAME 2',
                image: '',
                price: 120000
            },
            {
                id: 3,
                name: 'PRODUCT NAME 3',
                image: '',
                price: 220000
            },
            {
                id: 4,
                name: 'PRODUCT NAME 4',
                image: '',
                price: 123000
            },
            {
                id: 5,
                name: 'PRODUCT NAME 5',
                image: '',
                price: 320000
            },
            {
                id: 6,
                name: 'PRODUCT NAME 6',
                image: '',
                price: 120000
            }
        ];

        let listCards  = [];

        function initApp(){
            products.forEach((value, key) =>{
                let newDiv = document.createElement('div');
                newDiv.classList.add('item');
                newDiv.innerHTML = `
                    <img src="image/${value.image}">
                    <div class="title">${value.name}</div>
                    <div class="price">${value.price.toLocaleString()}</div>
                    <button onclick="addToCard(${key})">Add To Cart</button>`;
                list.appendChild(newDiv);
            })
        }

        initApp();

        function addToCard(key){
            if(listCards[key] == null){
                // copy product form list to list card
                listCards[key] = JSON.parse(JSON.stringify(products[key]));
                listCards[key].quantity = 1;
            } else {
                listCards[key].quantity++;
            }
            reloadCard();
        }

        function reloadCard(){
            listCard.innerHTML = '';
            let count = 0;
            let totalPrice = 0;
            listCards.forEach((value, key)=>{
                totalPrice = totalPrice + value.price;
                count = count + value.quantity;
                if(value != null){
                    let newDiv = document.createElement('li');
                    newDiv.innerHTML = `
                        <div><img src="image/${value.image}"/></div>
                        <div>${value.name}</div>
                        <div>${value.price.toLocaleString()}</div>
                        <div>
                            <button onclick="changeQuantity(${key}, ${value.quantity - 1})">-</button>
                            <div class="count">${value.quantity}</div>
                            <button onclick="changeQuantity(${key}, ${value.quantity + 1})">+</button>
                        </div>
                        <div>
                            <button class="delete-product" onclick="deleteProduct(${key})">Delete</button>
                        </div>`;
                    listCard.appendChild(newDiv);
                }
            });
            total.innerHTML = `<span class="total-title">Total:</span><span>${totalPrice.toLocaleString()}</span><span class="total-currency">Lei</span>`;
            quantity.innerText = count;
        }

        function deleteProduct(key) {
            delete listCards[key];
            reloadCard();
        }

        function changeQuantity(key, quantity){
            if(quantity == 0){
                delete listCards[key];
            }else{
                listCards[key].quantity = quantity;
                listCards[key].price = quantity * products[key].price;
            }
            reloadCard();
        };

Thanks in advance! :D Im a newbie

everything i try breaks the code I just wanted to make a simple add ot cart code wich obvious change the look of the container of the product inside the code and when it goes to cart it adds total of card to have a total of every single product inside cart