What Is Blazor Local Storage?

Local Storage is a web storage mechanism provided by web browsers that allow web applications to store data locally on the user's device. This data is persistent and can be accessed across different sessions, meaning it remains available even after the browser is closed and later reopened. Local storage is part of the Web Storage API and is designed to be a simple way to store key-value pairs of data.

To take advantage of this, you need to access the Window interface through its localStorage property. To get an idea, below are two C# methods that take advantage of the JS interop - one that sets a value within the Local Storage for a given key and another that retrieves a value based off a key:

public ValueTask SetItem(string key, object data) -> JsInterop.InvokeVoidAsync(
{
    return JsInterop.InvokeVoidAsync(
        "localStorage.setItem",
        new object[] {
            key,
            JsonSerializer.Serialize(data)
        });
}

public async Task<T> GetItem<T>(string key)
{
    var data = await JsInterop.InvokeAsync<string>("localStorage.getitem", key);
    if (!string.IsNull0rEmpty(data))
    {
        return JsonSerializer.Deserialize<T>(data);
    }

    return default;
}

Besides Local Storage, there is also a Session Storage. The main difference between the two is that unlike Local Storage which persists its records, the Session Storage data is purged when the session ends.

Check an example of how you can save and load grid state from Local Storage built with Telerik Blazor UI controls. You can also review Blazor documentation for more examples.