ASP.NET Core 6.0中_layout.cshtml侧边栏状态持久化问题问询

首先先修正你现有JavaScript里的语法错误：openNav函数里误用了比较运算符==，还多了个冗余闭合括号，修正后函数如下：

function openNav() {
    document.getElementById("SideNavID").style.display = "table-cell";
}

针对状态不持久的问题，最适配你场景的方案是用浏览器本地存储（localStorage），完全前端实现，无需修改任何子页面的后端代码，仅需调整_layout.cshtml里的JavaScript即可：

步骤1：修改开关函数，同步存储状态 #

在打开/关闭侧边栏时，将当前状态写入localStorage：

<script>
    // 打开侧边栏
    function openNav() {
        const sideNav = document.getElementById("SideNavID");
        sideNav.style.display = "table-cell";
        // 存储状态到本地
        localStorage.setItem("sidebarVisible", "true");
    }

    // 关闭侧边栏
    function closeNav() {
        const sideNav = document.getElementById("SideNavID");
        sideNav.style.display = "none";
        // 存储状态到本地
        localStorage.setItem("sidebarVisible", "false");
    }

    // 页面加载时自动恢复状态
    window.addEventListener('DOMContentLoaded', function() {
        const savedState = localStorage.getItem("sidebarVisible");
        const sideNav = document.getElementById("SideNavID");
        // 根据存储值设置显示状态，默认保持隐藏
        sideNav.style.display = savedState === "true" ? "table-cell" : "none";
    });
</script>

为什么优先选localStorage？ #

• 纯前端操作，无需和后端交互，避开了Session方案需要处理点击回发或AJAX的复杂逻辑
• 状态持久化，即使用户关闭浏览器再打开，侧边栏状态依然保留
• 仅需修改_layout.cshtml，不用动数千个子页面的代码

可选：会话级状态保留（关闭浏览器重置） #

如果只需要在当前浏览器会话中保留状态，把上述代码里的localStorage换成sessionStorage即可，用法完全一致。

补充：后端Session方案（若业务强制要求） #

如果必须将状态存在后端Session中，可通过AJAX调用后端接口实现：

1. 后端新增API接口，比如/api/Sidebar/SetVisibility，接收布尔值更新Session
2. 修改JS函数，开关时调用接口同步状态：

function openNav() {
    const sideNav = document.getElementById("SideNavID");
    sideNav.style.display = "table-cell";
    // 调用后端接口更新Session
    fetch('/api/Sidebar/SetVisibility?visible=true', { method: 'POST' });
    localStorage.setItem("sidebarVisible", "true"); // 同步前端存储避免状态延迟
}

3. 在_layout.cshtml的后端代码中读取Session值，直接渲染侧边栏状态：

@{
    var sidebarVisible = HttpContext.Session.GetString("sidebarVisible") == "true";
}
<div id="SideNavID" class="SideNav" style="display: @(sidebarVisible ? "table-cell" : "none")">
    <!-- 侧边栏内容 -->
</div>

该方案需配置后端Session和编写接口，复杂度高于前端存储，仅在业务强制要求时使用。

内容的提问来源于stack exchange，提问作者duckpower