如何在.NET 8 Blazor Web App的App.razor中获取LocalStorage值切换CSS

1. 修正LocalStorage值的解析问题 #

localStorage.getItem()返回的是字符串类型（即使存储的是布尔值，也会被转为"true"/"false"），直接用InvokeAsync<bool>会导致转换失败，需要先获取字符串再转为布尔值。

2. 处理异步加载后的组件刷新 #

Blazor组件初始渲染时，OnInitializedAsync可能还未执行完成，此时rtl还是默认值，需要在获取到值后调用StateHasChanged()触发重新渲染，确保CSS正确加载。

3. 完整实现代码 #

@inject IJSRuntime JSRuntime

@* 方式1：条件渲染link标签 *@
@if (rtl)
{
    <link rel="stylesheet" href="assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
}
else
{
    <link rel="stylesheet" href="assets/vendor/css/core.css" class="template-customizer-core-css" />
}

@* 方式2：动态绑定href（更简洁）*@
<link rel="stylesheet" href="@(rtl ? "assets/vendor/css/rtl/core.css" : "assets/vendor/css/core.css")" class="template-customizer-core-css" />

@code {
    private bool rtl;

    protected override async Task OnInitializedAsync()
    {
        // 从LocalStorage获取字符串值，处理键不存在的情况
        var rtlString = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "rtl");
        
        // 转换为布尔值，默认设为false
        rtl = bool.TryParse(rtlString, out var result) ? result : false;
        
        // 触发组件重新渲染
        StateHasChanged();
    }
}

额外优化：封装LocalStorage操作 #

可以封装工具类简化布尔值的读写逻辑：

public static class LocalStorageExtensions
{
    public static async Task<bool> GetBooleanAsync(this IJSRuntime jsRuntime, string key, bool defaultValue = false)
    {
        var value = await jsRuntime.InvokeAsync<string>("localStorage.getItem", key);
        return bool.TryParse(value, out var result) ? result : defaultValue;
    }

    public static async Task SetBooleanAsync(this IJSRuntime jsRuntime, string key, bool value)
    {
        await jsRuntime.InvokeVoidAsync("localStorage.setItem", key, value.ToString());
    }
}

使用时直接调用：

rtl = await JSRuntime.GetBooleanAsync("rtl");

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