C# Blazor에서 Session 데이터 저장하기 - Counter 값 유지하기

 

---

웹페이지에서 데이터는 어떻게 저장하는가

Blazor Server App을 통해서 프로젝트를 만들고 나서 Counter 메뉴에서 버튼을 눌러서 올라간 수치를 저장하고 싶어 졌습니다. 별다른 처리를 안 했다면 다른 메뉴를 갔다 오면 해당 수치가 0으로 초기화됩니다. 당연하게 저장될 거라고 생각했는데 처음에는 초기화돼서 당황했습니다.

 

관련해서 구글링을 해보니 Session에 관련 정보를 저장해야 한다는 것을 확인했습니다.

그리고 SessionStorage를 사용하면 되다는 것까지 확인했습니다.

 

비쥬얼 스튜디오 Nuget에서 Blazored.SessionStorage를 설치

 

반응형

Counter.razor 파일 예제코드

@page "/counter"
@inject Blazored.SessionStorage.ISessionStorageService sessionStorage

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {

    private int currentCount = 0;

    protected override async Task OnInitializedAsync()
    {
        currentCount = await sessionStorage.GetItemAsync<int>("counter");
    }

    private async void IncrementCount()
    {
        currentCount++;

        await sessionStorage.SetItemAsync("counter", currentCount);
    }
}

 

OnInitializedAsync() 함수에서 이전에 저장된 세션값을 가져옵니다. 없다면 0으로 시작됩니다.

IncrementCount() 함수가 호출될 때마다 상승된 값을 sessionStorage에 저장합니다.

 

이제 다른 메뉴를 다녀와도 값이 초기화되지 않습니다! 단순한 작업만으로도 꽤나 그럴듯해졌네요