Problems with the JS code

[Valeria_16]

I have a js code for creating bread crumbs. I have a lot of nested pages and collections, so I did it this way. In general, they work correctly, but there are problems.
1.Not all products are recorded in localStorage. For example, when I go to the brands section and go through the collections there, eventually the product is recorded and displayed in crumbs, but if I go to dinnerware and go to the product, all the crumbs are confused and the product remains alone. All products are made on default product
2.I need that when a person visits a page or a collection, but for some reason presses the back arrow, the values ​​from localstorage are overwritten
Also, maybe you can give me some advice on how to improve this code. I'll be looking forward to your help)

My code

{% 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">{{ page_name }}</span>
    {% elsif collection.metafields.custom.parent_collection %}
      <a href="{{ collection.metafields.custom.parent_collection | link_to }}" class="breadcrumb__link">{{ collection.metafields.custom.parent_collection_title }}</a>
      <span class="breadcrumb__separator"></span>
      <span class="breadcrumb__current" id="breadcrumb-current">{{ collection.title }}</span>
    {% endif %}
  </nav>
</div>

<script>
const collectionTitle = "{{ collection.title }}";
const pageName = "{{ page_name }}";
const productTitle = "{{ product.title }}"; 
const currentURL = window.location.href;

console.log('Current URL:', currentURL);
console.log('Collection Title:', collectionTitle);
console.log('Page Name:', pageName);
console.log('Product Title:', productTitle);

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

if (currentURL === 'https://www.finedinegroup.com/' || currentURL === 'https://www.finedinegroup.com') {
  localStorage.removeItem('collectionData');
  console.log('Collection data cleared');
} else {
  const pageData = {
    title: productTitle || collectionTitle || pageName,
    url: currentURL
  };

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

  console.log('Added page or collection:', pageData.title, pageData.url);

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

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

    console.log('Previous collections with links:', previousCollections);

    breadcrumbCurrent.insertAdjacentHTML('beforebegin', `<span class="breadcrumb__previous">${previousCollections} / </span>`);
  }
}
</script>

https://www.finedinegroup.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=125199155267

[Arif_Shopidevs]

Hello, using localstorage is not save way for bread crumbs if use visiting another page if key is same it will overwrite old one. It will better to generate it using liquide.

[Valeria_16]

please help me with the solution)

[Arif_Shopidevs]

Can you give me some url which you want like collection , product etc so that we can pattern and then we will try to developed a code for you.

Thank you