[Blazor] 로컬 데이터 저장하고 사용하는 방법 - Blazored.LocalStorage

Blazored 로 시작하는 패키지에 유용한것들이 많이 있습니다.
지난 포스팅에서는 Toast 를 처리했었는데
2023.01.02 - [C#/Blazor] - [Blazor] Blazored.Toast 사용하여 Toast Message 표시하기

오늘은 로컬 데이터를 저장하고 사용하는 방법을 알아봅니다.
1. Blazor WebAssembly 프로젝트 생성
2. Blazored.LocalStorage 패키지 설치

3. Program.cs 에 아래 코드 추가

using Blazored.LocalStorage;

builder.Services.AddBlazoredLocalStorage();

4. 화면에서 저장

@inject Blazored.LocalStorage.ILocalStorageService localStorage
를 사용하여 주입하고
아래 처럼 사용하면 저장됩니다.
await localStorage.SetItemAsync("key", localStorageKey);

Index.razor

@page "/"
@inject Blazored.LocalStorage.ILocalStorageService localStorage
<PageTitle>Index</PageTitle>

<h1>Local Storage Key</h1>

<input type="text" value="@localStorageKey" @onchange="ChangedAsync" />

@code {
    private string localStorageKey { get; set; }

    protected override async Task OnInitializedAsync()
    {
        localStorageKey = await localStorage.GetItemAsync<string>("key");
    }

    private async void ChangedAsync(ChangeEventArgs args)
    {
        localStorageKey = args.Value.ToString();
        await localStorage.SetItemAsync("key", localStorageKey);
    }
}

 
5. 화면에서 저장된 값 불러오기
@inject Blazored.LocalStorage.ILocalStorageService localStorage
를 사용하여 주입하고
아래 처럼 사용하여 저장된 데이터를 가져옵니다.
localStorageKey = await localStorage.GetItemAsync<string>("key");

Counter.razor

@page "/counter"
@inject Blazored.LocalStorage.ILocalStorageService localStorage

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">LocalStorage Key: @localStorageKey</p>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private string localStorageKey = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        localStorageKey = await localStorage.GetItemAsync<string>("key");
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

* 말그대로 로컬에 저장하는것이므로 브라우저를 껐다켜도 데이터가 남아있습니다.
  만약 브라우져가 켜져있는 동안만 사용할 꺼라면 Blazored.SessionStorage 를 이용해야합니다.

2023.01.17 - [C#/Blazor] - [Blazor] 세션 데이터 저장하고 사용하는 방법 - Blazored.SessionStorage

결과
index 화면에 입력된 값을 저장하고 Counter 화면에서 불러와서 사용합니다.

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.LocalStorageTest

GitHub - kei-soft/Blazor.AppTest