Javascript 在页面刷新/页面交换之间保存引导折叠状态

我有一个可以折叠的BS导航栏，我希望它在我更改页面或刷新当前页面时保存状态

home.php

<!-- Side Navbar -->
<nav class="side-navbar">
  <div class="side-navbar-wrapper">
    <div class="sidenav-header d-flex align-items-center justify-content-center">
      <div class="sidenav-header-inner text-center"><img src="img/marcus_avatar.png" alt="person" class="img-fluid rounded-circle">
        <h2 class="h5 text-uppercase"><?php echo $_COOKIE['userName']; ?></h2><span class="text-uppercase">Web Admin</span>
      </div>
      <div class="sidenav-header-logo"><a href="home" class="brand-small text-center"> <strong>S</strong><strong class="text-primary">F</strong></a></div>
    </div>
    <div class="main-menu">
      <ul id="side-main-menu" class="side-menu list-unstyled">                  
        <li class="active"><a href="home"> <i class="fa fa-home"></i><span>Home</span></a></li>
        <li> <a href="users"><i class="fa fa-users"></i><span>Users</span></a></li>
        <li> <a href="upload"><i class="fa fa-upload"></i><span>Upload</span></a></li>
        <li><a href="files"><i class="fa fa-file"></i><span>My Files</span></a></li>
      </ul>
    </div>
  </div>
</nav>

网站管理员

jsfile.js

$（.side-navbar”）.on（'show.bs.collapse'，函数（）
{
var active=$（this.attr（'id'）；
$.cookie（活动，“1”）；
});
$（.side-navbar”）.on（'hidden.bs.collapse'，函数（）
{
var active=$（this.attr（'id'）；
$.removeCookie（活动）；
});
$（文档）.ready（函数（）{
var panels=$.cookie（）；//获取所有cookie
对于（面板中的var面板）{//在这里添加一个我忘记的注释：当导航栏“折叠”时它添加了一个名为shrink的类，因此该类变为：side navbar shrink您提供的小提琴正在按照您的要求工作。那么还有什么需要？@Krishna9960我将用两张图片向您展示我的意思。第一张图片是默认状态。1.第二张图片是当我单击“折叠”按钮时，它在navbar上添加了一个名为d“收缩”，基本上只是缩小导航栏的宽度：2。因此，我希望始终保存当前状态，这就是用户最近显示的状态。请参阅，对于当前会话，您可以借助本地存储来执行此操作…但是，如果您希望每个登录都能记住它，而不考虑其位置，则必须将其保存在数据库中。对于当前会话本地存储应该对您有所帮助。谢谢。我现在只需要了解如何通过单击按钮向div添加/删除类。我想本地存储应该可以吗？