the problem with the popstate event

[Valeria_16]

when developing dynamic breadcrumbs, I need the ability to go back to the previous page and delete the last entry in the breadcrumbs. using the popstate event, I noticed that it was not working correctly. If I haven't interacted with the page I want to leave in any way, popstate doesn't work. Please help me figure this out. 

{% comment %} add in "main-collection-product-grid" "main-collection-banner" "collection-list" {% endcomment %}
<style>
.break.page-width {
    margin-top: 20px;
}
.breadcrumb__current {
    text-transform: capitalize;
}
a {
    text-decoration: none;
}
span.breadcrumb__previous {
    text-transform: capitalize;
}
</style>

{% assign current_path = request.path %}
{% assign path_parts = current_path | split: '/' %}
{% assign page_name = path_parts.last %}

<div class="break page-width">
  <nav class="breadcrumb">
    <a href="{{ shop.url }}">Home / </a>
    
    {% if current_path contains '/products/' %}
      <span class="breadcrumb__current" id="breadcrumb-current">{{ product.title }}</span>
    {% elsif current_path contains '/pages/' %}
      <span class="breadcrumb__current" id="breadcrumb-current">{{ page_name }}</span>
      <span class="breadcrumb__separator"></span>
    {% else %}
      <span class="breadcrumb__current" id="breadcrumb-current"></span>
    {% endif %}
  </nav>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname;
    const breadcrumbCurrent = document.getElementById('breadcrumb-current');
    const currentURL = window.location.href;

    let previousCollectionData = JSON.parse(localStorage.getItem('collectionData')) || [];

    if (currentPath.includes('/products/')) {
      breadcrumbCurrent.textContent = document.title;
    } else if (currentPath.includes('/collections/')) {
      const collectionName = currentPath.split('/collections/')[1].split('/')[0];
      breadcrumbCurrent.textContent = collectionName;
    } else if (currentPath.includes('/pages/')) {
      const pageName = currentPath.split('/').pop();
      breadcrumbCurrent.textContent = pageName;
    }

    const pageData = {
      title: breadcrumbCurrent.textContent,
      url: currentURL
    };

    previousCollectionData = previousCollectionData.filter(item => item.title !== pageData.title);
    previousCollectionData.push(pageData);

    localStorage.setItem('collectionData', JSON.stringify(previousCollectionData));

    if (previousCollectionData.length > 1) {
      const previousCollections = previousCollectionData.slice(0, -1).map(item => {
        return `<a href="${item.url}" class="breadcrumb-link">${item.title}</a>`;
      }).join(' / ');

      const breadcrumbSeparator = document.createElement('span');
      breadcrumbSeparator.className = 'breadcrumb__separator';
      breadcrumbCurrent.insertAdjacentElement('beforebegin', breadcrumbSeparator);
      breadcrumbSeparator.insertAdjacentHTML('beforebegin', `<span class="breadcrumb__previous">${previousCollections} / </span>`);
    }

// начало срабатывает когда нажимаешь на крошки

    document.querySelectorAll('.breadcrumb-link').forEach(link => {
      link.addEventListener('click', function(event) {
        event.preventDefault();
        const clickedTitle = this.textContent;
        const index = previousCollectionData.findIndex(item => item.title === clickedTitle);
        if (index !== -1) {
          previousCollectionData = previousCollectionData.slice(0, index + 1);
          localStorage.setItem('collectionData', JSON.stringify(previousCollectionData));
        }
        window.location.href = this.href; 
      });
    });

// конец срабатывает когда нажимаешь на крошки

// начало срабатывает когда нажимаешь на кнопку "назад"
window.addEventListener('load', function() {
    history.pushState(null, null, document.URL);
});

window.addEventListener('popstate', function(event) {
    if (previousCollectionData.length > 0) {
        previousCollectionData = previousCollectionData.slice(0, -1);
        localStorage.setItem('collectionData', JSON.stringify(previousCollectionData));
        console.log('well'); 
        window.location.href = previousCollectionData[previousCollectionData.length - 1].url;
    }

});

  // конец срабатывает когда нажимаешь на кнопку "назад"
  });
</script>