C# Blazor Session Storage 처리하기

C# Blazor Session Storage 처리하기

 

이전 시간에는 Local Storage 를 알아봤습니다.

2024.04.23 - [코딩/Blazor] - C# Blazor LocalStorage 사용하기

 

이번에는 웹페이지에 접속할때만 사용되는 Session 데이터를 처리하는 방법입니다.

Session 데이터는 웹페이지를 벗어나면 데이터가 사라집니다.

 

1. Blazored.SessionStorage 패키지 설치

 

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

using Blazored.SessionStorage;

builder.Services.AddBlazoredSessionStorage();

 

3. 화면에서 저장

@inject Blazored.SessionStorage.ISessionStorageService sessionStorage

를 선언하고 아래 처럼 사용하면 저장됩니다.

await sessionStorage.SetItemAsync("key", sessionStorageKey);

Index.razor

@page "/"
@inject Blazored.SessionStorage.ISessionStorageService sessionStorage
<PageTitle>Index</PageTitle>

<h1>Sessoin Storage Key</h1>

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

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

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

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

 

4. 화면에서 저장된 값 불러오기

@inject Blazored.SessionStorage.ISessionStorageService sessionStorage

아래 처럼 사용하여 저장된 데이터를 가져옵니다.

sessionStorageKey = await sessionStorage.GetItemAsync<string>("key");

Counter.razor

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

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Session Storage Key: @sessionStorageKey</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 sessionStorageKey = string.Empty;

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

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