.NET Blazor如何在页面重载后保持菜单切换状态

你的现有代码存在两个核心问题：一是使用了原生JS的onclick事件，没有用Blazor的绑定语法；二是用静态变量存储状态，页面刷新后会丢失。下面是完整的实现方案，能让菜单状态在页面刷新后保持不变：

完整实现代码（MainLayout.Razor） #

@inject IJSRuntime JSRuntime

<button @onclick="ToggleMenu">
    @(_menuOpen ? "收起菜单" : "展开菜单")
</button>

<!-- 示例菜单区域，根据状态控制显示 -->
@if (_menuOpen)
{
    <div class="sidebar">
        <p>菜单选项1</p>
        <p>菜单选项2</p>
    </div>
}

@code {
    private bool _menuOpen = true;
    // 本地存储的键名，用于标识这个状态
    private const string StorageKey = "MenuOpenState";

    protected override async Task OnInitializedAsync()
    {
        // 组件初始化时，从浏览器本地存储读取之前保存的状态
        var storedValue = await JSRuntime.InvokeAsync<string>("localStorage.getItem", StorageKey);
        if (bool.TryParse(storedValue, out var savedState))
        {
            _menuOpen = savedState;
        }
    }

    private async Task ToggleMenu()
    {
        // 切换菜单状态
        _menuOpen = !_menuOpen;
        // 将新状态写入本地存储，实现持久化
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", StorageKey, _menuOpen.ToString());
    }
}

关键细节说明 #

• Blazor事件绑定：用@onclick替代原生onclick，这是Blazor的标准事件绑定方式，能直接调用组件内的C#方法。
• 本地存储持久化：通过IJSRuntime调用浏览器的localStorageAPI，把状态存在浏览器中，页面刷新后依然能读取到。如果需要会话级别的存储（关闭标签页就清除），可以换成sessionStorage。
• 初始化读取状态：在OnInitializedAsync生命周期方法中读取存储的状态，保证组件加载时就恢复之前的菜单状态。
• 动态按钮文本：按钮文本根据菜单状态动态切换，让用户更直观地知道当前操作。

Blazor Server 注意事项 #

如果是Blazor Server模式，上述代码同样适用——因为本地存储是浏览器端特性，必须通过JS互操作来访问，和WebAssembly模式的实现逻辑一致。

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