Вопрос по LocalStorage, для отображения товаров приходится перезагружать страницу

Ребят, у меня такая проблема. У была такая задумка, что есть главная страница с товарами , а корзина находится на другой странице и все добавленные товары попадают туда. Есть код , все работает, сделано через LocalStorage, но , чтобы товары отобразились в корзине нужно перезагружать страницу, хотелось бы чтобы они сразу добавлялись и убирались в зависимости от того - добавил ли пользователь товар на главной странице или нет. Знаю, что есть событие storage, пробовал - не получилось, скорее всего я не правильно что-то сделал. В общем нужно, чтобы товары добавлялись и удалялись в реальном времени, а не с перезагрузкой страницы

Код главной страницы

let array = []
document.addEventListener ('click', function (e){
   const card = e.target.closest('.col__item')
      let cardDetails = {
         id: card.id,
         price: card.querySelector('.col__item-price').innerText,
         title: card.querySelector('.col__item-sub-price').innerText,
         image: card.querySelector('.col__item-img').querySelector('img').getAttribute('src'),
      }
      if (buttonHeart.classList.contains('active')) {
         cartCounter.innerText++
         contains(array,cardDetails.id)
         array.push(cardDetails)
       } else {
          cartCounter.innerText--
          removeArr(array,cardDetails.id)
       }
      function removeArr (arr,element) {
         arr.forEach((el,i)=> {
            if (el.id === element) {
               arr.splice(i, 1)
            }
         })
      }
      function contains (arr,element) {
         arr.forEach((el)=> {
            if (el.id === element) {
               element.remove()
            }
         })
      }
 window.localStorage.setItem('details', JSON.stringify(array))
 if (array.length === 0) {
   window.localStorage.removeItem('details');
 }      
})

Код страницы с корзиной

 const cartBody = document.querySelector('.cart__body')
const count = document.querySelector('.cart-counter')

const cartItems = getStorage()

window.addEventListener('DOMContentLoaded', function () {
  renderCart();
})

function getStorage() {
  return JSON.parse(localStorage.getItem('details')) || [];
}

function renderCart() {
  if (cartItems) {
    html = cartItems.map(item => toItem(item)).join(""); 
  } 
  cartBody.innerHTML = html;
  count.innerText = cartItems.length;
}

function toItem(item) {
  return `
         <div class="cart__row row" id='${item.id}'>
         <div class="row__container">
           <div class="cart__image">
              <img src="${item.image}" alt="">
            </div>
            <h5 class="cart__product-name">${item.title}</h5>
         <div class="cart__counter-wrapper counter">
              <div class="counter-minus count">-</div>
               <div class="counter-value">1</div>
              <div class="counter-plus count">+</div>
           </div>
           <div class="cart__price">${item.price}</div>
            <div class="cart__delete">X</div>
        </div>
     </div>`
}