在Blazor中,可以使用Web Storage API(如localStorage或sessionStorage)在客户端存储数据。以下是如何在Blazor中使用localStorage进行客户端存储的简单示例:
- 首先,在
_Imports.razor
文件中,导入Microsoft.JSInterop
命名空间:
@using Microsoft.JSInterop
- 在你的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 GetItemAsync(string key)
{
return await _jsRuntime.InvokeStringAsync("getItem", key);
}
}
- 在你的Blazor组件中,注入
LocalStorageService
并调用其方法来存储和检索数据:
@inject LocalStorageService LocalStorageService@data
@code { private string data; private async Task SaveData() { data = "https://www.yisu.com/ask/Hello, Blazor!"; await LocalStorageService.SetItemAsync("myKey", data); } private async Task GetData() { data = https://www.yisu.com/ask/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
即可。