thymeleaf后台侧边栏刷新之后伸缩问题

最近在做后台的项目，遇到到了侧边栏刷新之后，之前的侧边栏收缩了。于是我想用sessionStorage来全局存储侧边栏的状态。下面是实现代码：
侧边栏html:

<div class="sidebar" th:fragment="sidebar">
        <ul class="nav nav-pills nav-stacked flex-column">
            <li role="presentation" id="bar">
                <a href="#docCollapse-per" class="nav-header collapsed f-size dropdown-toggle"
                   style="text-decoration: none" data-toggle="collapse" id="collapseParent-per">
                    <img src="../image/per.png" class="icon-common">
                    权限管理
                </a>
                <ul id="docCollapse-per" class="nav-block nav-list collapse">
                    <li shiro:hasRole="admin" onclick="saveStatus('admin')">
                        <a th:href="@{/admin/findAdminList(current = ${1})}" class="dec-none s-size" style="text-decoration: none">管理员列表</a>
                    </li>
                    <li shiro:hasRole="admin" onclick="saveStatus('role')">
                        <a th:href="@{/permission/findAllPermission(current = ${1})}" class="dec-none s-size" style="text-decoration: none">权限列表</a>
                    </li>
                    <li shiro:hasRole="admin" onclick="saveStatus('per')">
                        <a th:href="@{/role/findRolePagination(current = ${1})}" class="dec-none s-size" style="text-decoration: none">角色列表</a>
                    </li>
                </ul>
            </li>
        </ul>    
    </div>

li上的onclick函数把参数存入到sessionStorage中
js代码：

function saveStatus(s) {
        sessionStorage.setItem("sideBar",s);
}

在$(document).ready(function () {}每次刷新都会初始化状态

let sideBar = sessionStorage.getItem("sideBar");
        if( sideBar === "admin" || sideBar === "role" || sideBar === "per") {
                let colPer = $("#collapseParent-per");
                changeSideBar(colPer);
                if( sideBar === "admin") {
                        colPer.next("ul").find("li").eq(0).addClass("sideBar-selected");
                }else if ( sideBar === "role" ) {
                        colPer.next("ul").find("li").eq(1).addClass("sideBar-selected");
                }else if ( sideBar === "per" ) {
                        colPer.next("ul").find("li").eq(2).addClass("sideBar-selected");
                }
        }
        
function changeSideBar(bar) {
        let colPer = bar;
        colPer.removeClass("collapsed");
        colPer.next("ul").addClass("collapse").addClass("show");
}

我这边用的是bootstrap的样式，用自己的样式也可以。