刷新页面后如何使我的导航栏保持活动状态？

Question

I have navbar dropdown and I want to make this dropdown list will active when clicked, my JavaScript coding is running but it will disappear when page refresh, how to solve this problem???

My JavaScript:

var header = document.getElementById("kt_header_menu");
var menu = header.getElementsByClassName("dropdown-item");
for (var i = 0; i < menu.length; i++) {
    menu[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        if (current.length > 0) {
            current[0].className = current[0].className.replace(" active", "");
        }
        this.className += " active";
    });
}

localStorage.setItem('selectedTab', 'active');
let tabValue = localStorage.getItem('selectedTab');
if(tabValue !== '') {
  $('dropdown-item').addClass(tabValue);
} else {
  tabValue = '';
}

My html navbar:

<ul class="menu-nav ">
                    <li class="menu-item dropdown ">
                        <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{__('navbar.product')}}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'FMS']) }}">{{__('Fleet
                                Management System')}}</a>
                            <a class="dropdown-item "
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'TMS']) }}">{{__('Tranportation
                                Management System')}}</a>
                            <a class="dropdown-item"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'TAS']) }}">{{__('Truck
                                Appointment System')}}</a>
                            <a class="dropdown-item"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'IOS']) }}">{{__('Integration
                                to other system')}}</a>
                        </div>
                    </li>
                </ul>

Answer 1

now i know the answer just add active in a class and isset

                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item {{(isset($slug)?(($slug=='FMS')?'active':''):'')}}"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'FMS']) }}">{{__('Fleet
                                Management System')}}</a>
                            <a class="dropdown-item {{(isset($slug)?(($slug=='TMS')?'active':''):'')}}"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'TMS']) }}">{{__('Tranportation
                                Management System')}}</a>
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'TAS']) }}">{{__('Truck
                                Appointment System')}}</a>
                            <a class="dropdown-item {{(isset($slug)?(($slug=='IOS')?'active':''):'')}}"
                                href="{{ route('product',['lang'=>App::currentLocale(), 'slug'=>'IOS']) }}">{{__('Integration
                                to other system')}}</a>
                        </div>