Blazor - budowa prostej aplikacji cz. 3

Ostatnia część wpisu na temat budowy prostej aplikacji w Blazor.

Dodanie local storage

Niestety to nie będzie już tak łatwe, jak poprzednie funkcjonalności. Mamy w zasadzie dwie opcje:

1. wywołać kod js z Blazor (coś w stylu eval)
2. skorzystać z gotowej biblioteki do obsługi local storage

Zdecydowałem się na tą drugą opcję, dokładniej na bibliotekę Blazored. Po instalacji i konfiguracji przechodzę do Pages/Home i wstrzykuję serwis pozwalający na dostęp do local storage.

@inject ILocalStorageService LocalStorage
@* @inject co_wstrzykuję nazwa_zmiennej_do_której_wstrzykuję *@

Utworzę następnie metodę Save, którą będę wywoływać przy każdej zmianie w liście zadań.

private async Task Save()
{
    await LocalStorage.SetItemAsync(Key, Items);
}

Dane odczytywać będę przy załadowaniu strony — w hooku OnInitializedAsync.

protected override async Task OnInitializedAsync()
{
    var found = await LocalStorage.GetItemAsync<List<ListItem>>(Key);

    if (found is not null)
    {
        Items = found;
    }
}

Teraz należy dodać do funkcji HandleAdd oraz HandleToggle wywołanie zapisu.

private async Task HandleAdd()
{
    Items.Insert(0, new ListItem { Content = Input });
    Input = "";
    await Save();
}

private async Task HandleToggle(ListItem item)
{
    item.Toggle();
    await Save();
}

private async Task HandleKeyDown(KeyboardEventArgs arg) 
{
    if (arg.Key == "Enter")
    {
        await HandleAdd(); @* HandleAdd zmieniła się na asynchroniczną, więc dodaję await *@
    }
}

Koniec. Funkcjonalność powinna w pełni działać. Po odświeżeniu strony dodane zadania powinny być nadal widoczne. Pełen kod możesz znaleźć tutaj.

Linki

Niestety brak :(