web-dev-qa-db-ja.com

BlazorでブラウザーのlocalStorageにアクセスするにはどうすればよいですか？

JWTをサポートしたいので、トークンを保持する必要があります。これにアクセスするための施設はありますか？それとも、今のところこの機能にアクセスするために独自のJavaScript関数を登録するだけなのでしょうか。

編集：アドバイスに従って、JS相互運用を次のように使用しようとしました：

<script>
    localStorage.setItem("key1", "key1data");
    Blazor.registerFunction("readStorage", (key) => {
        return localStorage.getItem(key);
    });
</script>
@if (jwtKey == null)
{
<div class="login-panel">
    <p>JWT not loaded</p>
</div>
}
else
{
<div class="login-panel">
    <p>@jwtKey</p>
</div>
}

@functions {
    public RenderFragment Body { get; set; }
    string jwtKey;

    protected override async Task OnInitAsync()
    {
        jwtKey = RegisteredFunction.Invoke<string>("readStorage", "key1");
        if (jwtKey == null)
        {
            jwtKey = "Unknown";
        }
    }
}

しかし、これによりdiagでWASMエラーが発生します。

WASM：[Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException]「readStorage」という名前の登録済み関数が見つかりませんでした。 WASM：エラー：「readStorage」という名前の登録済み関数が見つかりませんでした。

参考までに、これはBlazor VSボイラープレートプロジェクトのMainLayout.cshtmlにあります。

（必要に応じて新しい質問を作成できます。ただし、この質問に多少関係があります）

c#asp.net-coreblazor
9
Rollie

0.1の場合、独自のJavaScript相互運用機能を作成する必要があります。しかし、私はこれが何かに取り組んでいると思います、そしておそらく0.2リリースで。

別の方法として（セッション間でストレージが必要ない場合）、次のように独自のDIシングルトンを作成することもできます： https://github.com/aspnet/samples/blob/master/samples/aspnetcore/blazor/ FlightFinder/FlightFinder.Client/Services/AppState.cs

編集
これにはオープンなPRがあるため、実際にすぐに公開されるはずです https://github.com/aspnet/Blazor/pull/205

Edit20.2は実行されましたが、ローカルストレージはまだありません。その間、私はこのためのパッケージを開発しました： BlazorExtensions もnuget

7
Flores

他の誰かがこれに苦しんでいる場合（2018年6月7日現在）：Steve Sandersonがこの問題（localstorage）を彼のNDC会議ビデオで取り上げています https://www.youtube.com/watch?v = JU-6pAxqAa4 45分くらいから。

彼はこのためにnugetパッケージを使用します。 https://github.com/cloudcrate/BlazorStorage ページでの使用例なので、ここで再度説明する必要はありません。

2
Toke Breer-Mortensen

デフォルトでBlazorに実装されている可能性がありますが、今のところは次のようにしています。 Nuget-BlazorStorage

2
Ben Vertonghen

現在、キュレーションされた拡張機能であるBlazor.Extensions.Storageというパッケージがあります https://github.com/BlazorExtensions/Storage

0
Jonathan Parker