Blazor 客户端 Cookie - C#

Blazor是一个由微软开发的基于WebAssembly的前端框架，使用C#语言编写。而在Web开发中，Cookie是至关重要的一部分，因为它可以用来存储用户的会话信息等。

在Blazor客户端，我们可以通过jsRuntime对象调用JavaScript的document.cookie来设置和读取Cookie值。不过要注意安全问题，不建议将敏感信息存储在Cookie中。

设置Cookie

可以创建一个名为SetCookie的服务类，用于设置Cookie。在服务类中，我们首先通过@inject指令注入IJSRuntime对象，并在Set方法中调用JavaScript的document.cookie方法：

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

public class SetCookie
{
    private readonly IJSRuntime js;

    public SetCookie(IJSRuntime js)
    {
        this.js = js;
    }

    public async Task Set(string name, string value, double expireInDays)
    {
        await js.InvokeAsync<object>("setCookie", name, value, expireInDays);
    }
}

然后，我们需要将SetCookie服务类注册到依赖注入容器中，以便能够在组件中调用：

services.AddSingleton<SetCookie>();

接下来，我们就可以在组件中使用SetCookie服务类来设置Cookie了：

@inject SetCookie SetCookieService

<button @onclick="async () => await SetCookieService.Set('myCookie', 'Hello, world!', 7)">Set Cookie</button>

当按钮被点击时，SetCookie服务类的Set方法将会被调用。

读取Cookie

同样地，我们也可以创建一个名为GetCookie的服务类，用于读取Cookie。在服务类中，我们同样需要注入IJSRuntime对象，并在Get方法中通过JavaScript的document.cookie方法来读取Cookie值：

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

public class GetCookie
{
    private readonly IJSRuntime js;

    public GetCookie(IJSRuntime js)
    {
        this.js = js;
    }

    public async Task<string> Get(string name)
    {
        return await js.InvokeAsync<string>("getCookie", name);
    }
}

同样地，我们需要将GetCookie服务类注册到依赖注入容器中：

services.AddSingleton<GetCookie>();

最后，同样的，我们可以在组件中使用GetCookie服务类来读取Cookie：

@inject GetCookie GetCookieService

<p>Cookie Value: @cookieValue</p>

@code {
    private string cookieValue;

    protected override async Task OnInitializedAsync()
    {
        cookieValue = await GetCookieService.Get("myCookie");
    }
}

当组件初始化时，GetCookie服务类的Get方法将会被调用，并返回Cookie的值。

JavaScript实现

由于我们要调用JavaScript的document.cookie，因此我们还需要在Blazor项目中添加一个.js文件，并将其与index.html关联起来。下面是实现setCookie和getCookie的JavaScript代码：

function setCookie(name, value, expireInDays) {
    var date = new Date();
    date.setTime(date.getTime() + (expireInDays * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

以上代码实现了在Blazor客户端使用JavaScript设置Cookie和读取Cookie的功能。

参考文献：

• Blazor WebAssembly Cookie Authentication
• Create a Blazor Client-Side Cookie Manager Service