BlazorでlocalStorageを使ってデータを保存する

つい先日、「Kakuge Lounge Finder」というBlazor WebAssemblyで作ったWebアプリを公開しました。

www.kakuge-lounge.com

格ゲーでオンラインの対戦相手を募集する際に、希望の対戦相手の条件などをツイートしてTwitter上で募集するという文化があるのですが、このアプリはそのツイート文の生成を補助するアプリです。 アプリでは各フォームに入力したデータをlocalStorageに保存し、次回以降入力しなくて済むようになっています。 今回はBlazorでJavaScriptのlocalStorageまわりの関数を呼び出す方法を書いていきます。

C#からJavaScript関数を呼び出す

C#からJavaScript関数を呼び出すとき、JSRuntimeを使って呼び出します。基本的にはInvokeAsyncの第一引数にJavaScript関数名を入れて呼び出します。引数ありのJavaScript関数の場合は、第二引数に渡します。（引数が複数ある場合は配列で渡します）

@inject IJSRuntime JSRuntime
@code {
    private async ValueTask Save(string key, string value)
    {
        var args = new string[] { key, value };
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", args);
    }

    private async ValueTask<string> Load(string key)
    {
        return await JSRuntime.InvokeAsync<string>("localStorage.getItem", key);
    }
}

呼び出し側はこんな感じになります。

<button @onclick="@(async () => await Save("lastSaved", $"{DateTime.Now}"))">Save</button>

そもそも、なんでこんな回りくどいことしてJavaScriptを使うかというと、C#で定義しているViewModelなどのデータをJsonなどにシリアライズしてlocalStorageに保存するため、つまりC#、JavaScript間でデータを連携するためです。普通にlocalStorageを使うだけならbuttonタグのonclickにそのままJavaScriptを書くだけでいけます。

便利なライブラリがあった

で、これラップして共通化したいなぁと思ったんですが、自分でやらなくても有志の人が作ってくれてるだろうと思ってnuget見てたら良いのがありました。 github.com

参考

docs.microsoft.com