[Blazor] Blazored.LocalStorage 사용하기

웹페이지 내에서 사용자 Data 및 페이지의 특정값을 저장할 수 있는 방법으로 

Blazored.LocalStorage 누겟을 이용하여 구현할 수가 있습니다.

이 경우는 F5와 같이 상황에서 Reload 될 때,

화면의 특정 Control 값을 유지해야하는 경우에 사용할 수 있습니다.

 

@Page 내의 코드에 아래의 inject를 추가합니다.

@inject Blazored.LocalStorage.ILocalStorageService localStorage

 

@Code 내에 아래의 LocalStorage에서 불러오기, LocalStorage에 저장하기, LocalStorage에서 삭제하기

// 특정 key string을 이용하여 해당 key에 해당하는 저장을 수행합니다.
private const string key = "test";

// 불러오기
private async Task<List<string>> GetLocalStorage()
{
	return await localStorage.GetItemAsync<List<string>>(key);
}

// 저장하기
private async void SetLocalStorage()
{
	await localStorage.SetItemAsync(key, List<string> listInfo);
}

// 전체 저장정보 지우기 
private async void ClearStorage()
{
	await localStorage.ClearAsync();
}

// 특정 key를 이용한 사용자 Data 삭제하기
private async void RemoveStorage()
{
	await localStorage.RemoveAsync(key);
}

// AfterRender의 첫번째 수행에서 저장스토리지의 정보를 Get하는 코드입니다.
protected override async void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
       var results = await GetLocalStorage();
    } 
}