加载页面后导航栏活动选项不会保持活动状态

我的代码中有一个导航栏。它位于 ejs 文件名 nav.ejs 中

<nav class="navbar navbar-expand-sm bg-dark navbar-dark mr-auto" >
    
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav   ">
            <li class="nav-item">
                <a class="nav-link  " href="#">link1</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">link2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">link3</a>
            </li>

        </ul>
    </div>
</nav>

每次我单击导航栏中的某个项目时，它都应该变为活动状态。我将这行代码放置到每个页面上。这样，通过单击导航栏中的链接，它就会变为活动状态。

window.onload = function() {
    document.getElementById('about').classList.add('active');
}

window.onload = function() {
    document.getElementById('write').classList.add('active');
}

window.onload = function() {
    document.getElementById('home').classList.add('active');
};

我希望将这行代码移动到 example.js 文件中。所以在这种情况下，在一个文件中我将这段代码放在一起。通过单击每个链接，仅执行最后一行：

document.getElementById('home').classList.add('active');

我尝试使用 jquery 来编写它：

$(window).on("load", function() {
   
    $('.nav-link ').click(function() {
        // event.preventDefault();
   
       $(this).addClass('active').siblings().removeClass('active');
         document.getElementById('about').classList.add('active');

      
    })
});

但它不起作用。

在网站中，每当页面重新加载其擦除所有以前的临时设置（现在您的保存使您的活动选项卡临时），这意味着它不会保存您在页面中所做的事情，要解决此问题，您需要使用本地存储，保存活动选项卡的数据，每当您重新加载页面时，都会分配它所保留的数据。您可以了解有关本地存储的更多信息this https://www.w3schools.com/jsref/prop_win_localstorage.asp .

希望这会给你一些想法。