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

我的代码中有一个导航条。这位于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>

我希望将这行代码移动到sample.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');

      
    })
});

---

但它不起作用。

在网站中，每当一个页面重新加载其“擦除所有先前设置”时，该设置被设为临时设置（现在保存时将活动选项卡设为临时），这意味着它不会保存您在页面中所做的事情，要解决此问题，您需要使用本地存储，它保留活动选项卡的数据，并且每当您重新加载将分配其保留的数据的页面时。您可以在中了解有关本地存储的更多信息

希望这能给你一些想法

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

      
    })
});