c# - How do I create a cookie client side using blazor

Question

I have a login page that goes off to the server gets a bunch of data, then I want to take some of that data and save it into a cookie using Blazor on the client.

So To start I have successfully injected IHttpContextAccessor. and for now in my Blazor function I have:

httpContextAccessor.HttpContext.Response.Cookies.Append("test", "ddd");

in debug when I hit the above line of code it errors with:

"Headers are read-only, response has already started."

Of course I will not be saving "test" with "ddd" in the cookie, I'm just trying to get a cookie to save at the moment.

Answer 1

You will have to use JS interop:

        public async static Task WriteCookieAsync(string name, string value, int days)
        {
           var test = await JSRuntime.Current.InvokeAsync<object>("blazorExtensions.WriteCookie", name, value, days);
        }

Starting with ASP.NET Core 3.0.0-preview3 ([Discussion] Microsoft.Interop.JSRuntime.Current has been removed), the Current property is not available, so use the following code:

var test = await JSRuntime.InvokeAsync<string>("blazorExtensions.WriteCookie", name, value, days);

Don't forget to inject IJSRuntime at the top:

@inject IJSRuntime JSRuntime

And this JS:

window.blazorExtensions = {

WriteCookie: function (name, value, days) {

    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
}