How to initialize Map inside localStorage?

Question

I am trying to implement product cart in my e-commerce site. Everything is working fine but only on one page.

The main idea, is to store products inside the Map data structure. So the key is a product id and the value is the other information about product.

simple explanation how it works. More detailed below

{ key -> id:
value -> {
           name: name,
           image: image,
           numberOfProducts: numberOfProducts,
           price: numberOfProducts
         }
}

As you can see, with this approach I have to initialize a variable with Map data structure in my App.js folder, whitch always updates when a new page opens and all data inside the Map clears, because it reinitialize the empty Map variable again with.

Here is the implementation of logic in Vanilla JS.

let cartMap = new Map;
localStorage.setItem("cartMap",JSON.stringify(cartMap))

let numberOfProducts = 1;
sessionStorage.setItem("amount",numberOfProducts)


function addToCart(name,id,price,image){

    if(cartMap.has(id)){

      cartMap.set(id,
        {
          name: name,
          image: image,
          numberOfProducts: ++numberOfProducts,
          price: price*numberOfProducts
        }
      )
    }
    else{

      numberOfProducts = 1;

      cartMap.set(id,
        {
          name: name,
          image: image,
          numberOfProducts: numberOfProducts,
          price: price*numberOfProducts
        }
      )
    }
    alerting()
}

const cartContent = document.querySelector('.modal-content-cart');

function alerting(){
  cartContent.innerHTML = Array.from( cartMap ).map(
    (([key,value]) => (
        `
        <div class="container-form-cart" id="cart_${key}">     
  
              <button onclick="removeItemFromCart(${key})" type="button" class="delete-product-from-cart">
                  <img src="/images/remove-image.png" alt="${key}">
              </button>
  
              <img class="cart-image" src="${value.image}" alt="">
  
              <h1 class="cart-name">
                ${value.name}
              </h1>
  
              <div class="amountOf">
                  <button onclick="increment(${key})" type="button" class="up">+</button>
                  <h1 class="total-price_${key}">${value.numberOfProducts}</h1>
                  <button onclick="decrement(${key})" type="button" class="down">-</button>
              </div>
  
              <h1 class="sum-price">
                  <p class="product-price-one_${key}">${value.price}</p>&#8381
              </h1>
  
        </div>
        
        `
      )
    )
  ).join("");
}

function increment(id){
  

  cartMap.set(
    
    id,
      {...cartMap.get(id),
        numberOfProducts:cartMap.get(id).numberOfProducts+1,
        price: cartMap.get(id).price+(cartMap.get(id).price/(cartMap.get(id).numberOfProducts))
      }
    )

  document.querySelector(".total-price_"+id).textContent = cartMap.get(id).numberOfProducts
  document.querySelector(".product-price-one_"+id).textContent = cartMap.get(id).price
}




function decrement(id){
  

  cartMap.set(
    id,
      {...cartMap.get(id),
        numberOfProducts:cartMap.get(id).numberOfProducts-1,
        price: cartMap.get(id).price-(cartMap.get(id).price/(cartMap.get(id).numberOfProducts))
      }
    )

  document.querySelector(".total-price_"+id).textContent = cartMap.get(id).numberOfProducts
  document.querySelector(".product-price-one_"+id).textContent = cartMap.get(id).price
}

function removeItemFromCart(id){
  cartMap.delete(id)
  document.querySelector("#cart_"+id).remove()
}

First try

I've tried to move from Map implementation into Html/map version, it basically means that my HTML will be that Map with keys as a name of the div class and object info inside it, but with this case I got stuck with the innerHTML -> I can't make it create again and again one more div if i add product to the card, and even thou i will face same problem with page switching I think it's not a good implementation of product Cart.

<div class="modal-wrapper">
     <form class="modal-content-cart animate">
       <!-- Here will come the cart -->

     </form>

</div>

Second try

I could've solve this problem with localStorage, but it can't initialize inside a Map. We always have to first initialize the map then store it inside the localStorage, same with sessionStorage.

Third try

How do I persist a ES6 Map in localstorage (or elsewhere)? in this question thy don't initialize the actual Map, they do it with ES6 map.

Conclusion

From all that thoughts and tries i came up with two questions. 

Is there an ultimate way to initialize Map without reinitialize when the page reloads? and the second question, How can I use my HTML as Map, so i will add HTML blocks one after another inside the div,without replacing them. If you need additional information, don't be shy, go ahead and ask it.