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?
• Local storage approaches.
• Protected local storage.
• Vanilla 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 key value pair 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:

Local storage approaches

In Blazor Server, you can access the local storage with 2 approaches: protected local storage and vanilla local storage.

• Protected local storage: is the approach that is invented by Microsoft and is a built-in function of Blazor Server. Data stored using the protected local storage can only be retrieved by the protected local storage approach only because the data is encrypted by Microsoft beforehand. Those data cannot be decrypted by the other Blazor Server projects, even within the same domain.
• Vanilla local storage: is the approach that use JavaScript to access the local storage data. The stored data is not encrypted and can be retrieved by other Blazor Server within the same domain.

Protected local storage

To use the protected local storage, you simply just need to inject the ProtectedLocalStorage and call its methods. For example:

@inject ProtectedLocalStorage ProtectedLocalStorage

<button class="btn btn-primary" type="button" @onclick="StoreValueAsync">Store value</button>

@code {
    public async Task StoreValueAsync()
    {
        await ProtectedLocalStorage.SetAsync("BlazorSchool", "Blazor Tutorials 2023");
    }
}

Vanilla local storage

This section will help you to use the vanilla local storage.

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();
    }
}