Blazor - 如何在浏览器中保存布尔状态真/假，使其在重新加载页面时不会改变？

问题描述

我有两种不同的视图（列表和卡片），我想保存切换的视图，以便在 Blazor/C# 中重新加载页面时它不会更改。

<p>Testing-Function</p>
<button @onclick="ToggleListCard">Testing-button</button>


private bool CardisActive = true;
private void ToggleListCard() {
    if (CardisActive == true)
    {
        CardisActive = false;
        OnCardListToggled.InvokeAsync(CardisActive = false);
        Console.WriteLine("True Toggled!");     
    }                                       
    else                                   
    {
          CardisActive = true;
          OnCardListToggled.InvokeAsync(CardisActive = true);
          Console.WriteLine("False Toggled!");
    }

    Console.WriteLine("Toggled!");
}

解决方法

您可以使用此 https://github.com/Blazored/LocalStorage 库将对象保存到浏览器本地存储并在每次需要时读取它。
替代方法：使用 JS 互操作获取并保存在本地存储中
JS 互操作：https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0
本地存储：https://www.w3schools.com/html/html5_webstorage.asp