Как передать данные с домашней страницы на другую страницу, используя vanilla javascript (web)

Question

На моей домашней странице отображаются два свойства, которые я извлек из базы данных облачного пожарного хранилища. Когда я нажимаю на одну из них, она берет меня на другую страницу html, которую я создал, и она отображает данные. Тем не менее, моя проблема заключается в том, что когда я нажимаю на другое свойство, оно также выводит меня на ту же страницу html, но оно показывает данные первого свойства. Это мой код, и я надеюсь, что кто-то может помочь с этим .. это домашняя страница, а другая html страница Здесь я получаю данные из базы данных облачного пожарного хранилища:

// get data from the cloud Database and display on the home page
db.collection('properties').onSnapshot(snapshot => {
    setupProp(snapshot.docs);

});
// get data from cloud database and display on the sub page
db.collection('properties').onSnapshot(snapshot => {
    setupSub(snapshot.docs);

});

и здесь, где я показываю их на своей домашней странице:

const setupProp = data => {
  let html = '';
  data.forEach(doc => {
    const info = doc.data();

    let li = `
    <div id="${doc.id}" class="col s12 l4 items">
      <div class="card" style="height: 407px;">
        <div class="card-image">
          <a href="property.html">
          <img src="${info.image[0]}" style="height: 228px;"></a>
          <a class="btn-floating halfway-fab waves-effect waves-light red center status">${info.type}</a>
        </div>
        <div class="card-content">
          <span><b class="house-title">${info.title}</b></span><br>
          <span><b class="blue-text price">${info.price}</b> &#36;</span><br>
          <span class="material-icons blue-text">room</span>
          <span><b class="city">${info.city}</b></span><br>
          <span class="material-icons blue-text">single_bed</span>
          <span><b class="rooms">${info.rooms}</b> rooms</span>
        </div>
      </div>
  </div>
    `;
    html += li

    showingProp.innerHTML = html;

  })
}

, а здесь я показываю их на другой странице html, но на ней отображаются только данные первого свойства:

const setupSub = (data) => {
 data.forEach(doc => {
    let info = doc.data();
    let html = `
    <div class="row" >
            <div class="col l6 s12 m12">
                <div class="carousel carousel-slider" data-indicators ="true" style="border-radius: 5px;">
                    <a href="#" class="carousel-item"><img src="/images/property/IMG_6818.JPG" alt="istanbul" style="height: 390px;"></a>
                    <a href="#" class="carousel-item"><img src="/images/property/IMG_6820.JPG" alt="turkey" style="height: 390px;"></a>
                    <a href="#" class="carousel-item"><img src="/images/property/IMG_6823.JPG" alt="istanbul" style="height: 390px;"></a>
                    <a href="#" class="carousel-item"><img src="/images/property/IMG_6826.JPG" alt="istanbul" style="height: 390px;"></a>
                </div>
                <div class="btn indigo waves-affect prev">Prev</div>
                <div class="btn indigo waves-affect right next">Next</div>
            </div>
            <div class="col l6 s12 m12">
                <div class="card" style="height: 357px; border-radius: 5px; background-color: #f9f9f9; padding: 10px;">
                    <h5 class="center">${info.title}</h5><br><br>
                    <span style="font-weight: bold;">Price: ${info.price} &#36;</span><br><br>
                    <span><i class="material-icons blue-text">room</i> Located in ${info.city}.</span><br><br>
                    <span><i class="material-icons blue-text">single_bed</i> Total Rooms ${info.rooms}.</span><br><br>

                </div>
            </div>
        </div>
    `;
    propShow.innerHTML = html;
  })
}