blazor c#如何實現客戶端存儲

在Blazor中，可以使用Web Storage API（如localStorage或sessionStorage）在客戶端存儲數據。以下是如何在Blazor中使用localStorage進行客戶端存儲的簡單示例：

1. 首先，在_Imports.razor文件中，導入Microsoft.JSInterop命名空間：

@using Microsoft.JSInterop

2. 在你的Blazor組件中，添加一個用于存儲和檢索數據的JavaScript方法。例如，創建一個名為LocalStorageService.cs的新文件，并添加以下代碼：

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

public class LocalStorageService
{
    private readonly IJSRuntime _jsRuntime;

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

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

    public async Task<string> GetItemAsync(string key)
    {
        return await _jsRuntime.InvokeStringAsync("getItem", key);
    }
}

3. 在你的Blazor組件中，注入LocalStorageService并調用其方法來存儲和檢索數據：

@inject LocalStorageService LocalStorageService

<button @onclick="SaveData">Save Data</button>
<button @onclick="GetData">Get Data</button>
<p>@data</p>

@code {
    private string data;

    private async Task SaveData()
    {
        data = "Hello, Blazor!";
        await LocalStorageService.SetItemAsync("myKey", data);
    }

    private async Task GetData()
    {
        data = await LocalStorageService.GetItemAsync("myKey");
    }
}

在這個示例中，我們創建了一個名為LocalStorageService的類，它提供了SetItemAsync和GetItemAsync方法來存儲和檢索數據。然后，在Blazor組件中，我們注入了LocalStorageService并調用了這些方法來存儲和檢索數據。

注意：這個示例使用了JavaScript的localStorage對象。如果你想在Blazor中使用sessionStorage，只需將LocalStorageService類中的_jsRuntime.InvokeVoidAsync("setItem", key, value)和_jsRuntime.InvokeStringAsync("getItem", key)方法中的localStorage替換為sessionStorage即可。