[Blazor] LocalStorage 사용법

참고

• https://www.prowaretech.com/articles/current/blazor/wasm/localstorage-utility

개요

• Blazor 에서 LocalStorage 사용하는 방법에 대해서 정리 진행합니다.

개발 환경

• 개발 환경은 다음과 같습니다.
  • .NET 6
  • Visual Studio 2022

LocalStorage 란?

• 로컬 스토리지는 웹 스토리지 객체 중 하나입니다.
• 로컬 스토리지는 데이터를 브라우저에 반영구적으로 저장하며, 브라우저를 종료 후 재시작해도 데이터가 남아있습니다.
• 또한, 다른 창과 브라우저를 통해서도 접근이 가능합니다.

Blazor 서버 프로젝트 생성

• Blazor 서버 프로젝트를 생성합니다.

ILocalStorage.cs 인터페이스 추가

• ILocalStorage.cs 인터페이스를 추가합니다.

namespace BlazorLocalStorage;

public interface ILocalStorage
{
    // 브라우저 로컬 저장소에서 키를 제거합니다.
    public Task RemoveAsync(string key);

    // 문자열 값을 브라우저 로컬 저장소에 저장합니다.
    public Task SaveStringAsync(string key, string value);

    // 브라우저 로컬 저장소에서 문자열 값을 가져옵니다.
    public Task<string> GetStringAsync(string key);

    // 문자열 값 배열을 브라우저 로컬 저장소에 저장합니다.
    public Task SaveStringArrayAsync(string key, string[] values);

    // 브라우저 로컬 저장소에서 문자열 값의 배열을 가져옵니다.
    public Task<string[]> GetStringArrayAsync(string key);

    // 개체 값을 브라우저 로컬 저장소에 저장합니다.
    public Task SaveObjectAsync(string key, object value);

    // 브라우저 로컬 저장소에서 개체를 가져옵니다.
    public Task<T> GetObjectAsync<T>(string key);
}

LocalStorage.cs 구현체 구현

• 앞에서 ILocalStorage 인터페이스를 선언해 주었습니다.
• 이헤 ILocalStorage 인터페이스를 상속받아서 구체적으로 인터페이스 내에 정의된 내용을 구현하는 LocalStorage 구현체를 구현합니다.

using Microsoft.JSInterop;

namespace BlazorLocalStorage;

public class LocalStorage : ILocalStorage
{
    private readonly IJSRuntime jsruntime;

    public LocalStorage(IJSRuntime jsruntime)
    {
        this.jsruntime = jsruntime;
    }

    public async Task SaveStringArrayAsync(string key, string[] values)
    {
        if (values != null)
            await jsruntime.InvokeVoidAsync("localStorage.setItem", key, string.Join('\0', values)).ConfigureAwait(false);
    }

    public async Task<string[]> GetStringArrayAsync(string key)
    {
        var data = await jsruntime.InvokeAsync<string>("localStorage.getItem", key).ConfigureAwait(false);
        if (!string.IsNullOrEmpty(data))
            return data.Split('\0');
        return null;
    }

    public async Task SaveStringAsync(string key, string value)
    {
        await jsruntime.InvokeVoidAsync("localStorage.setItem", key, value).ConfigureAwait(false);
    }

    public async Task<string> GetStringAsync(string key)
    {
        return await jsruntime.InvokeAsync<string>("localStorage.getItem", key).ConfigureAwait(false);
    }

    public async Task RemoveAsync(string key)
    {
        await jsruntime.InvokeVoidAsync("localStorage.removeItem", key).ConfigureAwait(false);
    }

    public async Task SaveObjectAsync(string key, object value)
    {
        string json = System.Text.Json.JsonSerializer.Serialize(value);
        byte[] data = System.Text.Encoding.UTF8.GetBytes(json);
        string b64 = System.Convert.ToBase64String(data);
        await SaveStringAsync(key, b64);
    }

    public async Task<T> GetObjectAsync<T>(string key)
    {
        string b64 = await GetStringAsync(key);
        if (b64 == null)
            return default(T);
        byte[] data = System.Convert.FromBase64String(b64);
        string json = System.Text.Encoding.UTF8.GetString(data);
        return System.Text.Json.JsonSerializer.Deserialize<T>(json);
    }
}

Program.cs 서비스 주입

• 앞에서 ILocalStorage, LocalStorage 를 구현하였습니다.
• 이제 Program.cs 에서 DI 로 해당 서비스를 주입 시켜주어야 합니다.

using BlazorLocalStorage;
using BlazorLocalStorage.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

builder.Services.AddTransient<ILocalStorage, LocalStorage>(); // LocalStorage 서비스 주입

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

LocalStorage 테스트 페이지 생성

• 실제로 LocalStorage 를 사용하는 예제 코드를 작성해 보도록 하겠습니다.
• 테스트를 위해 TestLocalStorgae.razor 페이지를 생성 합니다.
• 예제 코드는 User 객체를 생성 후, User 객체를 LocalStorage 에 저장 후 저장된 내용을 화면에 출력해보는 예제 입니다.

@page "/localstorage"
@inject ILocalStorage LocalStorage

<h3>TestLocalStorage</h3>

<div>
    @if (data != null)
    {
        <p>LocalStorage 에서 가져온 UserName : @data.username</p>
        <p>LocalStorage 에서 가져온 UserName : @data.email</p>
        <p>LocalStorage 에서 가져온 UserName : @data.jwt</p>
        <p>LocalStorage 에서 가져온 UserName : @data.created</p>
    }
</div>

@code {
    private User data { get; set; } = new User();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        User value = new User { username = "BeomBeomJoJo",
                                email = "BeomBeomJoJo@gmail.com",
                                jwt = "fhasu9f3whfi8fdakid",
                                created = DateTime.Now };

        await LocalStorage.SaveObjectAsync("user", value);

        data = await LocalStorage.GetObjectAsync<User>("user");

        await LocalStorage.RemoveAsync("user");
    }

    [Serializable]
    public class User
    {
        public string? username { get; set; }
        public string? email { get; set; }
        public string? jwt { get; set; }
        public DateTime created { get; set; }
    }
}

• 실행 결과, 정상적으로 출력 되는 것을 확인할 수 있습니다.

첨부 파일

BlazorLocalStorage.zip

619.8 kB