C# Blazor Local Storage 사용하기

C# Blazor Local Storage 사용하기

 

웹페이지 상에서 Local Storrage 를 사용하여 데이터를 저장하고 불러오는 방법을 알아봅니다.

 

1. Blazored.LocalStorage 패키지 설치

 

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

using Blazored.LocalStorage;

builder.Services.AddBlazoredLocalStorage();

 

3. 화면에서 저장하기

@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);
    }
}

 

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

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

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 를 이용해야합니다.

다음 포스팅에서 다뤄보겠습니다.