如何使用 Blazor 保存设置到客户端?

话不多说,直接上代码

1. 添加服务类, 完整代码比较长,放到文章最后

public interface ICookie
{
    public Task RemoveValue(string key);
    public Task SetValue(string key, string value, int? days = null);
    public Task<string> GetValue(string key, string def = "");
}

public interface IStorage
{
    public Task RemoveValue(string key);
    public Task SetValue<TValue>(string key, TValue value) where TValue : class;
    public Task<TValue?> GetValue<TValue>(string key, TValue? def = null) where TValue : class;
}

2. 然后在 startup.cs 中添加此服务

services.AddScoped<IStorage, StorageService>();
services.AddScoped<ICookie, CookieService>();

3. 页面使用

[Inject, NotNull] protected IStorage? Storage { get; set; }
[Inject, NotNull] protected ICookie? Cookie { get; set; }


string Username;

Username = await Storage.GetValue<string>("username");

await Storage.SetValue("username", States.Username);
await Storage.RemoveValue("username");

Username = await Storage.GetValue("username");

await Cookie.SetValue("username", States.Username);
await Cookie.RemoveValue("username");

4. 服务类代码

LocalStorage

using Microsoft.JSInterop;

public interface IStorage
{
    public Task RemoveValue(string key);
    public Task SetValue<TValue>(string key, TValue value) where TValue : class;
    public Task<TValue?> GetValue<TValue>(string key, TValue? def = null) where TValue : class;
}

public class StorageService : IStorage
{
    readonly IJSRuntime JSRuntime; 

    public StorageService(IJSRuntime jsRuntime)
    {
        JSRuntime = jsRuntime; 
    }

    public async Task SetValue<TValue>(string key, TValue value) where TValue : class
    {
        await JSRuntime.InvokeVoidAsync("eval", $"localStorage.setItem('{key}', '{value}')");
    }

    public async Task<TValue?> GetValue<TValue>(string key, TValue? def) where TValue : class
    {
        var cValue = await JSRuntime.InvokeAsync<TValue>("eval", $"localStorage.getItem('{key}');"); 
        return cValue??def;
    }
    public async Task RemoveValue(string key)
    {
         await JSRuntime.InvokeVoidAsync("eval", $"localStorage.removeItem('{key}')");
    }
     

}

Cookie

using Microsoft.JSInterop;

public interface ICookie
{
    public Task RemoveValue(string key);
    public Task SetValue(string key, string value, int? days = null);
    public Task<string> GetValue(string key, string def = "");
}

public class CookieService : ICookie
{
    readonly IJSRuntime JSRuntime;
    string expires = "";

    public CookieService(IJSRuntime jsRuntime)
    {
        JSRuntime = jsRuntime;
        ExpireDays = 300;
    }

    public async Task SetValue(string key, string value, int? days = null)
    {
        var curExp = (days != null) ? (days > 0 ? DateToUTC(days.Value) : "") : expires;
        await SetCookie($"{key}={value}; expires={curExp}; path=/");
    }

    public async Task<string> GetValue(string key, string def = "")
    {
        var cValue = await GetCookie();
        if (string.IsNullOrEmpty(cValue)) return def;

        var vals = cValue.Split(';');
        foreach (var val in vals)
            if (!string.IsNullOrEmpty(val) && val.IndexOf('=') > 0)
                if (val.Substring(0, val.IndexOf('=')).Trim().Equals(key, StringComparison.OrdinalIgnoreCase))
                    return val.Substring(val.IndexOf('=') + 1);
        return def;
    }
    public async Task RemoveValue(string key)
    {
        await SetCookie($"{key}=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/");
    }

    private async Task SetCookie(string value)
    {
        await JSRuntime.InvokeVoidAsync("eval", $"document.cookie = \"{value}\"");
    }

    private async Task<string> GetCookie()
    {
        return await JSRuntime.InvokeAsync<string>("eval", $"document.cookie");
    }

    public int ExpireDays
    {
        set => expires = DateToUTC(value);
    }

    private static string DateToUTC(int days) => DateTime.Now.AddDays(days).ToUniversalTime().ToString("R");

}

好了, 你学会了吗?