📜  blazor 客户端 cookie - C# (1)

📅  最后修改于: 2023-12-03 15:13:40.016000             🧑  作者: Mango

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关联起来。下面是实现setCookiegetCookie的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的功能。

参考文献: