Blazor Service localstrage

Blazor Service可以使用localStorage来存储和读取数据。下面是一个使用Blazor Service和localStorage的示例：

首先，在Blazor项目中创建一个名为LocalStorageService的服务类，用于封装localStorage的操作方法。在该类中，我们可以使用JSRuntime来调用JavaScript的localStorage对象。

using Microsoft.JSInterop;
using System.Threading.Tasks;

public class LocalStorageService
{
    private readonly IJSRuntime _jsRuntime;

    public LocalStorageService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task<string> GetItem(string key)
    {
        return await _jsRuntime.InvokeAsync<string>("localStorage.getItem", key);
    }

    public async Task SetItem(string key, string value)
    {
        await _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, value);
    }

    public async Task RemoveItem(string key)
    {
        await _jsRuntime.InvokeVoidAsync("localStorage.removeItem", key);
    }
}

然后，在Blazor组件中注入LocalStorageService，并使用它来存储和读取数据。

@page "/localstorage-example"

@inject LocalStorageService localStorageService

<h3>LocalStorage Example</h3>

<button @onclick="SaveData">Save Data</button>
<button @onclick="LoadData">Load Data</button>

@code {
    private string data = "";

    private async Task SaveData()
    {
        await localStorageService.SetItem("myData", "Hello, Blazor!");
    }

    private async Task LoadData()
    {
        data = await localStorageService.GetItem("myData");
    }
}

在上面的示例中，我们创建了一个名为LocalStorage Example的Blazor页面，其中包含了两个按钮，分别用于保存数据和加载数据。当点击保存数据按钮时，我们调用LocalStorageService的SetItem方法将数据存储到localStorage中。当点击加载数据按钮时，我们调用LocalStorageService的GetItem方法从localStorage中读取数据，并将其显示在页面上。

请注意，为了使用JSRuntime来调用JavaScript代码，我们需要在Blazor项目中引用Microsoft.JSInterop包，并在Startup.cs文件中添加以下代码：

using Microsoft.Extensions.DependencyInjection;
using Microsoft.JSInterop;

public void ConfigureServices(IServiceCollection services)
{
    // ...

    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<IJSRuntime, JSRuntime>();
    services.AddScoped<LocalStorageService>();

    // ...
}

这样，我们就可以在Blazor项目中使用Blazor Service和localStorage来实现数据的存储和读取了。