Session storage

🟨 Slightly different to Blazor WebAssembly

Session storage is a convenient and efficient way to store a small amount of data on the client-side, which can be easily accessed and updated by a web application.

• What is Session storage?
• Set up the base code for interacting with Session storage.
• Add common operations to your Session storage code.
• Use Session storage.
• Key differences between Blazor WebAssembly and Blazor Server.

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

What is Session storage?

Session storage is a modern technique that allows developers to store data in a key-value pair format. It can be thought of as a persistent browser dictionary with string-based keys and values. If non-string data is entered, it will be automatically converted to a string. For instance, if the key/value is set as the number 1, Session storage will store it as a string "1". Data in Session storage is isolated by domain, meaning that one domain cannot access another domain's resources. For instance, data created by blazorschool.com cannot be accessed by google.com and vice versa.

How to access the Session storage in the browser?

In Firefox, you can find the Session storage under the Storage tab, as shown in the image below:

In Chrome and Edge, you can find the Session storage under the Application tab, as shown in the images below:

Set up the base code for interacting with Session storage

The Session storage is exclusively accessible through the JavaScript API. This means that in order to access it, you will need to create a JavaScript module. You can refer to the JavaScript Interaction tutorial and choose IJSRuntime to interact with your module. Below is an example of how to access the Session storage using IJSRuntime.

1. Create a new JavaScript file under the wwwroot folder. For example: /js/SessionStorageAccessor.js.
2. Create a C# class with the following base implementation:

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

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

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

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

3. Register the IndexedDbAccessor class in the Program.cs file:

builder.Services.AddScoped<SessionStorageAccessor>();

Add common operations to your Session storage code

In this section, we will demonstrate how to perform basic Session storage operations in JavaScript and C#. With the provided code, you can easily store, get, and delete data from the Session. Additionally, you can customize the code to add your own operations as well.

1. To store, get and delete data, add the following functions to your JavaScript module:

export function get(key)
{
    return window.sessionStorage.getItem(key);
}

export function set(key, value)
{
    window.sessionStorage.setItem(key, value);
}

export function clear()
{
    window.sessionStorage.clear();
}

export function remove(key)
{
    window.sessionStorage.removeItem(key);
}

2. To use these operations in your C# class, add a method for each operation, and call WaitForReference() in all of them. Here is an example implementation:

public class SessionStorageAccessor : IAsyncDisposable
{
    ...
    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);
    }

    public async Task Clear()
    {
        await WaitForReference();
        await _accessorJsRef.Value.InvokeVoidAsync("clear");
    }

    public async Task RemoveAsync(string key)
    {
        await WaitForReference();
        await _accessorJsRef.Value.InvokeVoidAsync("remove", key);
    }
}

Use Session storage

Once you have completed all the previous steps, you can use the Session storage as follows:

@inject SessionStorageAccessor SessionStorageAccessor

<h3>BrowserStorageDemonstrate</h3>
<form>
    <label>
        Key
        <input type="text" @bind-value="Key" />
    </label>
    <label>
        Value
        <input type="text" @bind-value="Value" />
    </label>
    <button type="button" @onclick="SetValueAsync">Set Value</button>
</form>
<div>Stored Value: @StoredValue</div>
<button type="button" @onclick="GetValueAsync">Get Value</button>
<button type="button" @onclick="RemoveAsync">Remove Value</button>
<button type="button" @onclick="ClearAllAsync">Clear All</button>

@code {
    public string Key { get; set; } = "";
    public string Value { get; set; } = "";
    public string StoredValue { get; set; } = "";

    public async Task SetValueAsync()
    {
        await SessionStorageAccessor.SetValueAsync(Key, Value);
    }

    public async Task GetValueAsync()
    {
        StoredValue = await SessionStorageAccessor.GetValueAsync<string>(Key);
    }

    public async Task RemoveAsync()
    {
        await SessionStorageAccessor.RemoveAsync(Key);
    }

    public async Task ClearAllAsync()
    {
        await SessionStorageAccessor.Clear();
    }
}

Key differences between Blazor WebAssembly and Blazor Server

In Blazor WebAssembly, you can also use InteropServices.JavaScript to interact with the JavaScript.