Cookie storage

Cookie storage is a legacy technique to keep track of your user activities and store the user information. In this tutorial, you will learn:

• What is Cookie storage?
• Set up the base code.
• Add common operations.
• Use the Cookie storage.

You can download the example code used in this topic on GitHub.

What is Cookie storage?

The Cookie storage allows you to store information under key value type. Cookie, or cookies, used to be a cross domain resource. However, in 2023, Cookies will be bound to a domain. Each key and value stored in cookies will have an expiry date, it might be forever, depends on your desire. Keep in mind that the user may also delete the cookies as well. You can also make your cookie not accessible from JavaScript code. We do not encourage you to use the Cookie storage because:

1. Cookies are always sent with every request, they can worsen performance (especially for mobile data connections).
2. Cookie storage is a legacy technique.

MDN also not encourage you to use the Cookie storage as in this tutorial. We encourage you to use other modern browser storage types like the Local storage, Session storage or IndexedDb storage.

How to access the Cookie storage in the browser?

You can access the Cookie storage in the browser by opening the Developer Tools (F12 for most browsers).

For Firefox, the Cookie storage is located at the Storage tab as the following image:

For Chrome and Edge, the Cookie storage is located at the Application tab as the following images:

Set up the base code

To use the Cookie storage, you first need to create a JavaScript module, then you will use C# code to call the exported functions of this module.

1. Create a new JavaScript file under the wwwroot folder. In this example, we will create a js/CookieStorageAccessor.js file.
2. Create a C# class with the following base implementation:

public class CookieStorageAccessor
{
    private Lazy<IJSObjectReference> _accessorJsRef = new();
    private readonly IJSRuntime _jsRuntime;

    public CookieStorageAccessor(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    private async Task WaitForReference()
    {
        if (_accessorJsRef.IsValueCreated is false)
        {
            _accessorJsRef = new(await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/CookieStorageAccessor.js"));
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_accessorJsRef.IsValueCreated)
        {
            await _accessorJsRef.Value.DisposeAsync();
        }
    }
}

Always remember to dispose the JavaScript module.

3. Register the C# class at Program.cs

builder.Services.AddScoped<CookieStorageAccessor>();

Add common operations

In this section, we will demonstrate how to add some basic operations with the Cookie storage. You can also add your own operations with this method too.

1. In your JavaScript module, add functions to set and get the data:

export function get()
{
    return document.cookie;
}

export function set(key, value)
{
    document.cookie = `${key}=${value}`;
}

2. In your C# class, create a new method for each operation. You will need to call WaitForReference() in all methods.

public class CookieStorageAccessor
{
    ...
    public async Task<T> GetValueAsync<T>(string key)
    {
        await WaitForReference();
        var result = await _accessorJsRef.Value.InvokeAsync<T>("get", key);

        return result;
    }

    public async Task SetValueAsync<T>(string key, T value)
    {
        await WaitForReference();
        await _accessorJsRef.Value.InvokeVoidAsync("set", key, value);
    }
}

Use the Cookie storage

Once you have the complete all the previous steps, you can inject the C# class and call the get and set method.