Persilsoft.WebStorage.Blazor 1.0.4

Persilsoft.WebStorage.Blazor

Provides services to interoperate with the localStorage and sessionStorage objects.

Example

First, you need to register the following group of services in the dependency container:

using ServiceCollectionExtensions;

builder.Services.AddWebStorage();

Next, you can inject the LocalStorage or SessionStorage service into you Blazor components.
The following example demonstrates how to store simple text strings in the localStorage.

@page "/localstorage-string"
@inject LocalStorage Storage

<h1>Storage - string</h1>
<hr />

<div class="row">
    <div class="offset-md-3 col-12 col-md-6">
        <div class="input-group mb-2">
            <input @bind=key type="text" class="form-control" placeholder="Your key" />
            <input @bind=value type="text" class="form-control" placeholder="Your value" />
            <button class="btn btn-primary" @onclick=Add>Add</button>
        </div>
    </div>
</div>

<table class="table">
    <thead>
        <tr>
            <th>Key</th>
            <th>Value</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in values)
        {
            <tr>
                <td>@item.Key</td>
                <td>@item.Value</td>
                <td>
                    <button class="btn btn-outline-danger" type="button" @onclick="@(() => Remove(item.Key))">
                        <i class="bi bi-trash3"></i>
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>
<div class="text-center">
    <button class="btn btn-danger" @onclick=Clear>Remove all</button>
</div>

@code {
    private string key;
    private string value;
    private Dictionary<string, string> values = new();

    protected override async Task OnInitializedAsync()
    {
        await PrintValues();
    }

    private async Task Add()
    {
        if (!string.IsNullOrWhiteSpace(key) && !string.IsNullOrWhiteSpace(value))
        {
            await Storage.SetItemAsStringAsync(key, value);
            await PrintValues();

            key = "";
            value = "";
        }
    }

    private async Task PrintValues()
    {
        values.Clear();
        int length = await Storage.CountAsync();
        for (int i = 0; i < length; i++)
        {
            string key = await Storage.GetKeyAsync(i);
            string value = await Storage.GetItemAsStringAsync(key);
            values.Add(key, value);
        }
    }

    private async Task Remove(string key)
    {
        await Storage.RemoveItemAsync(key);
        await PrintValues();
    }

    public async Task Clear()
    {
        await Storage.ClearAsync();
        await PrintValues();
    }
}

But you can also store complex types; the library will serialize objects into JSON format and store them as strings.

@page "/localstorage-complex"
@inject LocalStorage Storage

<h1>Storage - data complex</h1>
<hr />

<div class="row mb-2">
    <div class="col">
        <input @bind=person.FirstName class="form-control" placeholder="First name" />
    </div>

    <div class="col">
        <input @bind=person.LastName class="form-control" placeholder="Last name" />
    </div>
    <div class="col">
        <input @bind=person.Age class="form-control" placeholder="Age" />
    </div>
</div>
<div class="text-center">
    <button class="btn btn-primary" @onclick=Add>Add</button>
</div>

<table class="table">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Age</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var person in persons)
        {
            <tr>
                <td>@person.FirstName</td>
                <td>@person.LastName</td>
                <td>@person.Age</td>
                <td>
                    <button class="btn btn-outline-danger" type="button" @onclick="@(() => Remove(person.Id))">
                        <i class="bi bi-trash3"></i>
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>
<div class="text-center">
    <button class="btn btn-danger" @onclick=Clear>Remove all</button>
</div>

@code {
    private Person person = new();
    private List<Person> persons;

    protected override async Task OnInitializedAsync()
    {
        await PrintValues();
    }

    private async Task Add()
    {
        if (!string.IsNullOrWhiteSpace(person.FirstName) && !string.IsNullOrWhiteSpace(person.LastName))
        {
            string newId = Guid.NewGuid().ToString();
            person.Id = newId;
            await Storage.SetItemAsync(newId, person);
            await PrintValues();
            person = new Person();
        }
    }

    private async Task PrintValues()
    {
        persons = new List<Person>();
        int length = await Storage.CountAsync();
        for (int i = 0; i < length; i++)
        {
            string key = await Storage.GetKeyAsync(i);
            var item = await Storage.GetItemAsync<Person>(key);
            persons.Add(item);
        }
    }

    private async Task Remove(string key)
    {
        await Storage.RemoveItemAsync(key);
        await PrintValues();
    }

    public async Task Clear()
    {
        await Storage.ClearAsync();
        await PrintValues();
    }

    class Person
    {
        public string Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
    }
}