Moving Items from one html page to another

how to move an item in a list from one html page to another without or with using localStorage.set-getItem

I am makimg an e commerce website. When my client clicks the “add” button of an item, I want that Item to move to the shopping cart. The problem is that the shopping cart is a different html page (not in the same maine html page)

I tried to ust this, yet it did not work

Let list = document.querySelectorAll(".list .item")
    list.forEach(item => { item.addEventListener("click", function(item) { if(event.target.classList.contains("add")) {
document.querySelector(".listcart").appendChild(item)
   }
  })
})

(The list is in the main html page, and the listcart is in another html page)
It worked when I put the listcart in the same main page, but when I moved it to another one, the code stopped working, yet there is no errors in the console

So guys do you have a slution for this?