如何在blazor中保持页面重新加载后的菜单切换状态

正如你所指出的。你必须把信息存储在某个地方。

最好是将其存储在本地存储中,您可以通过js函数访问本地存储:

<div>
    <button @onclick="ChangeMenuState">Menu open/close</button>
    Menu is: @_menuOpen
</div>

@code{
    bool _menuOpen;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                _menuOpen = bool.Parse(await Js.InvokeAsync<string>("localStorage.getItem", nameof(_menuOpen)));
                StateHasChanged();
            }
            catch
            {
                Console.WriteLine($"local storage not set for {_menuOpen}");
            }
        }
    }

    async Task ChangeMenuState()
    {
        _menuOpen = !_menuOpen;
        await Js.InvokeVoidAsync("localStorage.setItem", nameof(_menuOpen), _menuOpen);
    }

}

为了在Blazor应用程序中实现目标,您需要在页面刷新期间保持切换按钮的状态。有几种方法可以实现这一点:

LocalStorage或SessionStorage:您可以使用浏览器存储机制,如LocalStorage或Session storage来存储切换按钮的状态。这样,即使刷新了页面,状态也会保持不变。以下是如何修改代码以使用LocalStorage:

<button @onclick="Toggle">
    Toggle
</button>

@code {
    private bool menuOpen = true;

    protected override void OnInitialized()
    {
        // Check if the menu state is stored in LocalStorage
        if (JSRuntime != null)
        {
            menuOpen = await JSRuntime.InvokeAsync<bool>("localStorage.getItem", "menuOpen") ?? true;
            StateHasChanged();
        }
    }

    private async Task Toggle()
    {
        menuOpen = !menuOpen;
        if (JSRuntime != null)
        {
            await JSRuntime.InvokeVoidAsync("localStorage.setItem", "menuOpen", menuOpen.ToString());
        }
    }
}

服务器端存储:您可以将切换按钮的状态存储在服务器端,例如数据库中。这种方法需要向服务器发出更新和检索状态的请求,这可能会引入一些延迟,但可以确保状态在会话和设备之间持续存在。

查询参数:您也可以将状态存储在URL中的查询参数中。但是,如果您希望在会话之间保持状态,或者URL可能会更改,则这种方法可能不适用。