Local storage

Local storage is a quick and easy way to store a small amount of data. In this tutorial, you will discover:

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

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

What is Local storage?

Local storage is a modern technique, key value pair based, to store data. Think of the Local storage as a Dictionary<string,string> that persists on the browser. The key and value of the Local storage must be a string, if it is not a string, it will be automatically converted to a string. For example, if you set the key/value as 1 (number), the Local storage will automatically proceed to store the key/value as "1" (string). The Local storage isolates data by the domain. That being said, one domain cannot access another domain's resources. For example, data created by blazorschool.com cannot be accessed by google.com and vice versa.

How to access the Local storage in the browser?

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

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

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

Set up the base code

To use the Local 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/LocalStorageAccessor.js file.
2. Create a C# class with the following base implementation:

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

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

    private async Task WaitForReference()
    {
        if (_accessorJsRef.IsValueCreated is false)
        {
            _accessorJsRef = new(await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/LocalStorageAccessor.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<LocalStorageAccessor>();

Add common operations

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

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

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

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

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

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

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

public class LocalStorageAccessor : 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 the Local storage

Once you have the complete all the previous steps, you can use it as follows:

@inject LocalStorageAccessor LocalStorageAccessor

<h3>BrowserStorageDemonstrate</h3>
<form>
    <label class="form-label">
        Key
        <input class="form-control" type="text" @bind-value="Key" />
    </label>
    <label class="form-label">
        Value
        <input class="form-control" type="text" @bind-value="Value" />
    </label>
    <button class="btn btn-primary" type="button" @onclick="SetValueAsync">Set Value</button>
</form>
<div>Stored Value: @StoredValue</div>
<button class="btn btn-primary" type="button" @onclick="GetValueAsync">Get Value</button>
<button class="btn btn-primary" type="button" @onclick="RemoveAsync">Remove Value</button>
<button class="btn btn-primary" 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 LocalStorageAccessor.SetValueAsync(Key, Value);
    }

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

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

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